tailwind-table-dom 1.1.6

package/bin/table/v2/commands/table/template/V6/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/v2/commands/table/template/V6/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;

package/bin/table/v2/commands/table/template/V6/TableFirstRow/V3/SearchFuncs/V4/Highlight/highlightRow.js

@@ -0,0 +1,25 @@
+// /TableSearch/Highlight/highlightRow.js
+
+import highlightCell from "./highlightCell.js";
+
+const highlightRow = ({
+    row,
+    regex
+}) => {
+
+    if (row.style.display === "none") {
+        return;
+    };
+
+    row._cells.forEach((cell) => {
+
+        highlightCell({
+            cell,
+            regex
+        });
+
+    });
+
+};
+
+export default highlightRow;

package/bin/table/v2/commands/table/template/V6/TableFirstRow/V3/SearchFuncs/V4/Highlight/highlightRows.js

@@ -0,0 +1,21 @@
+// /TableSearch/Highlight/highlightRows.js
+
+import highlightRow from "./highlightRow.js";
+
+const highlightRows = ({
+    rows,
+    regex
+}) => {
+
+    rows.forEach((row) => {
+
+        highlightRow({
+            row,
+            regex
+        });
+
+    });
+
+};
+
+export default highlightRows;

package/bin/table/v2/commands/table/template/V6/TableFirstRow/V3/SearchFuncs/V4/Highlight/resetCellHighlight.js

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

package/bin/table/v2/commands/table/template/V6/TableFirstRow/V3/SearchFuncs/V4/Utils/getRegex.js

@@ -0,0 +1,20 @@
+// /TableSearch/Utils/getRegex.js
+
+const getRegex = ({
+    searchValue
+}) => {
+
+    const escapedSearchValue =
+        searchValue.replace(
+            /[.*+?^${}()|[\]\\]/g,
+            "\\$&"
+        );
+
+    return new RegExp(
+        `(${escapedSearchValue})`,
+        "ig"
+    );
+
+};
+
+export default getRegex;

package/bin/table/v2/commands/table/template/V6/TableFirstRow/V3/SearchFuncs/V4/Utils/updateFooter.js

@@ -0,0 +1,18 @@
+// /TableSearch/Utils/updateFooter.js
+
+const updateFooter = ({
+    inUpdateFooter,
+    inContainerEl
+}) => {
+
+    if (inUpdateFooter) {
+
+        inUpdateFooter({
+            inContainerEl
+        });
+
+    };
+
+};
+
+export default updateFooter;

package/bin/table/v2/commands/table/template/V6/TableFirstRow/V3/SearchFuncs/V4/index.js

@@ -0,0 +1,90 @@
+// /TableSearch/start.js
+
+import cacheRows from "./Cache/cacheRows.js";
+
+import filterRows from "./Filter/filterRows.js";
+
+import clearHighlights from "./Highlight/clearHighlights.js";
+import highlightRows from "./Highlight/highlightRows.js";
+
+import getRegex from "./Utils/getRegex.js";
+import updateFooter from "./Utils/updateFooter.js";
+
+import updateLabel from "./updateLabel.js";
+
+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
+        });
+        // line 41
+
+        const visibleRowsCount =
+            rows.filter((row) =>
+                row.style.display !== "none"
+            ).length;
+
+        updateLabel({
+            inContainerEl,
+            visibleRowsCount,
+            totalRowsCount: rows.length
+        });
+
+        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/v2/commands/table/template/V6/TableFirstRow/V3/SearchFuncs/V4/updateLabel.js

@@ -0,0 +1,20 @@
+// /SearchFuncs/V4/updateLabel.js
+
+const startFunc = ({
+    inContainerEl,
+    visibleRowsCount,
+    totalRowsCount
+}) => {
+
+    const tableNameClass =
+        inContainerEl.querySelector(".tableNameClass");
+
+    const tableName =
+        tableNameClass.dataset.tableName;
+
+    tableNameClass.innerHTML =
+        `${tableName} ${visibleRowsCount}/${totalRowsCount}`;
+
+};
+
+export default startFunc;

package/bin/table/v2/commands/table/template/V6/TableStore/V1/columnStore.js

@@ -0,0 +1,13 @@
+export const createColumnStore = () => {
+    let keys = [];
+    let visibleColumns = [];
+
+    return {
+        setColumns: (cfg) => {
+            keys = cfg.map(c => c.columnName);
+            visibleColumns = cfg.filter(c => c.isVisible !== false).map(c => c.columnName);
+        },
+        getColumns: () => keys,
+        getVisibleColumns: () => visibleColumns
+    };
+};

package/bin/table/v2/commands/table/template/V6/TableStore/V1/dataStore.js

@@ -0,0 +1,38 @@
+export const createDataStore = () => {
+    let data = [];
+    let searchConfig = { type: "global", value: "" };
+
+    return {
+        setData: (inData) => { data = inData; },
+        getData: () => data,
+        setSearchConfig: (config) => { searchConfig = config; },
+        getSearchConfig: () => searchConfig,
+        getFinalData: () => {
+            let result = [...data];
+            if (searchConfig.value || searchConfig.filters?.length) {
+                if (searchConfig.type === "global") {
+                    result = result.filter(row =>
+                        Object.values(row).some(val =>
+                            val != null && String(val).includes(searchConfig.value)
+                        )
+                    );
+                }
+                if (searchConfig.type === "column") {
+                    result = result.filter(row =>
+                        row[searchConfig.key] != null &&
+                        String(row[searchConfig.key]).includes(searchConfig.value)
+                    );
+                }
+                if (searchConfig.type === "multi") {
+                    result = result.filter(row =>
+                        searchConfig.filters.every(f =>
+                            row[f.key] != null &&
+                            String(row[f.key]).includes(f.value)
+                        )
+                    );
+                }
+            }
+            return result;
+        }
+    };
+};

package/bin/table/v2/commands/table/template/V6/TableStore/V1/metaStore.js

@@ -0,0 +1,11 @@
+export const createMetaStore = () => {
+    let tableName = "";
+    let defaultRow = {};
+
+    return {
+        setDefaultRow: (row) => { defaultRow = row; },
+        getDefaultRow: () => defaultRow,
+        setTableName: (name) => { tableName = name; },
+        getTableName: () => tableName
+    };
+};

package/bin/table/v2/commands/table/template/V6/TableStore/V1/start.js

@@ -0,0 +1,9 @@
+import { createDataStore } from "./dataStore.js";
+import { createColumnStore } from "./columnStore.js";
+import { createMetaStore } from "./metaStore.js";
+
+export const createStore = () => ({
+    ...createDataStore(),
+    ...createColumnStore(),
+    ...createMetaStore()
+});

package/bin/table/v2/commands/table/template/V6/TableStore/V2/columnStore.js

@@ -0,0 +1,25 @@
+import { prepareDefaultRow } from "../../Utils/tableHelpers.js";
+
+export const createColumnStore = () => {
+    let keys = [];
+    let visibleColumns = [];
+    let visibleColumnsConfig = [];
+    let dataListColumns = [];
+
+    return {
+        setColumns: (inColumns) => {
+            keys = inColumns;
+        },
+        setVisibleColumns: (inVisibleColumns) => {
+            visibleColumns = inVisibleColumns;
+        }, setVisibleConfig: (inVisibleConfig) => {
+            visibleColumnsConfig = inVisibleConfig;
+        },
+        getColumns: () => keys,
+        getVisibleColumns: () => visibleColumns,
+        getVisibleColumnsConfig: () => visibleColumnsConfig,
+        setDataListColumns: (d) => { dataListColumns = d; },
+        getDataListColumns: () => dataListColumns,
+    };
+};
+

package/bin/table/v2/commands/table/template/V6/TableStore/V2/dataStore.js

@@ -0,0 +1,45 @@
+export const createDataStore = () => {
+    let data = [];
+    let searchConfig = { type: "global", value: "" };
+    let findData = {};
+    let dataLists = {};
+
+    return {
+        setData: (inData) => { data = inData; },
+        getData: () => data,
+        setSearchConfig: (config) => { searchConfig = config; },
+        getSearchConfig: () => searchConfig,
+        getFinalData: () => {
+            let result = [...data];
+            if (searchConfig.value || searchConfig.filters?.length) {
+                if (searchConfig.type === "global") {
+                    result = result.filter(row =>
+                        Object.values(row).some(val =>
+                            val != null && String(val).includes(searchConfig.value)
+                        )
+                    );
+                }
+                if (searchConfig.type === "column") {
+                    result = result.filter(row =>
+                        row[searchConfig.key] != null &&
+                        String(row[searchConfig.key]).includes(searchConfig.value)
+                    );
+                }
+                if (searchConfig.type === "multi") {
+                    result = result.filter(row =>
+                        searchConfig.filters.every(f =>
+                            row[f.key] != null &&
+                            String(row[f.key]).includes(f.value)
+                        )
+                    );
+                }
+            }
+            return result;
+        },
+        setFindData: (inData) => { findData = inData; },
+        getFindData: () => findData,
+        setDataList: (key, inData) => { dataLists[key] = inData; },
+        getDataList: (key) => dataLists[key],
+        getAllDataLists: () => dataLists,
+    };
+};

package/bin/table/v2/commands/table/template/V6/TableStore/V2/metaStore.js

@@ -0,0 +1,11 @@
+export const createMetaStore = () => {
+    let tableName = "";
+    let defaultRow = {};
+
+    return {
+        setDefaultRow: (row) => { defaultRow = row; },
+        getDefaultRow: () => defaultRow,
+        setTableName: (name) => { tableName = name; },
+        getTableName: () => tableName
+    };
+};

package/bin/table/v2/commands/table/template/V6/TableStore/V2/start.js

@@ -0,0 +1,9 @@
+import { createDataStore } from "./dataStore.js";
+import { createColumnStore } from "./columnStore.js";
+import { createMetaStore } from "./metaStore.js";
+
+export const createStore = () => ({
+    ...createDataStore(),
+    ...createColumnStore(),
+    ...createMetaStore()
+});

package/bin/table/v2/commands/table/template/V6/TableStore/V3/columnStore.js

@@ -0,0 +1,31 @@
+import { prepareDefaultRow } from "../../Utils/tableHelpers.js";
+
+export const createColumnStore = () => {
+    let keys = [];
+    let visibleColumns = [];
+    let visibleColumnsConfig = [];
+    let dataListColumns = [];
+    let searchableColumnsConfig = [];
+
+    return {
+        setColumns: (inColumns) => {
+            keys = inColumns;
+        },
+        setVisibleColumns: (inVisibleColumns) => {
+            visibleColumns = inVisibleColumns;
+        },
+        setVisibleConfig: (inVisibleConfig) => {
+            visibleColumnsConfig = inVisibleConfig;
+        },
+        setSearchableColumnsConfig: (inColumns) => {
+            searchableColumnsConfig = inColumns;
+        },
+        getColumns: () => keys,
+        getVisibleColumns: () => visibleColumns,
+        getVisibleColumnsConfig: () => visibleColumnsConfig,
+        setDataListColumns: (d) => { dataListColumns = d; },
+        getDataListColumns: () => dataListColumns,
+        getSearchableColumnsConfig: () => searchableColumnsConfig
+    };
+};
+

package/bin/table/v2/commands/table/template/V6/TableStore/V3/dataStore.js

@@ -0,0 +1,48 @@
+export const createDataStore = () => {
+    let data = [];
+    let searchConfig = { type: "global", value: "" };
+    let findData = {};
+    let dataLists = {};
+    let findDataFromParams = {};
+
+    return {
+        setData: (inData) => { data = inData; },
+        getData: () => data,
+        setSearchConfig: (config) => { searchConfig = config; },
+        getSearchConfig: () => searchConfig,
+        getFinalData: () => {
+            let result = [...data];
+            if (searchConfig.value || searchConfig.filters?.length) {
+                if (searchConfig.type === "global") {
+                    result = result.filter(row =>
+                        Object.values(row).some(val =>
+                            val != null && String(val).includes(searchConfig.value)
+                        )
+                    );
+                }
+                if (searchConfig.type === "column") {
+                    result = result.filter(row =>
+                        row[searchConfig.key] != null &&
+                        String(row[searchConfig.key]).includes(searchConfig.value)
+                    );
+                }
+                if (searchConfig.type === "multi") {
+                    result = result.filter(row =>
+                        searchConfig.filters.every(f =>
+                            row[f.key] != null &&
+                            String(row[f.key]).includes(f.value)
+                        )
+                    );
+                }
+            }
+            return result;
+        },
+        setFindData: (inData) => { findData = inData; },
+        getFindData: () => findData,
+        setDataList: (key, inData) => { dataLists[key] = inData; },
+        getDataList: (key) => dataLists[key],
+        getAllDataLists: () => dataLists,
+        setFindFromParams: (inData) => { findDataFromParams = inData; },
+        getFindFromParams: () => findDataFromParams,
+    };
+};

package/bin/table/v2/commands/table/template/V6/TableStore/V3/metaStore.js

@@ -0,0 +1,15 @@
+export const createMetaStore = () => {
+    let tableName = "";
+    let defaultRow = {};
+    let toSaveRow = {};
+
+    return {
+        setDefaultRow: (row) => { defaultRow = row; },
+        getDefaultRow: () => defaultRow,
+        setTableName: (name) => { tableName = name; },
+        getTableName: () => tableName,
+        setToSaveRow: (row) => { toSaveRow = row; },
+        appendToSaveRow: (key, value) => { toSaveRow[key] = value; },
+        getToSaveRow: () => toSaveRow,
+    };
+};

package/bin/table/v2/commands/table/template/V6/TableStore/V3/start.js

@@ -0,0 +1,9 @@
+import { createDataStore } from "./dataStore.js";
+import { createColumnStore } from "./columnStore.js";
+import { createMetaStore } from "./metaStore.js";
+
+export const createStore = () => ({
+    ...createDataStore(),
+    ...createColumnStore(),
+    ...createMetaStore()
+});

package/bin/table/v2/commands/table/template/V6/UI/BuilderVersions/V1/buildDataListContainer.js

@@ -0,0 +1,6 @@
+export const buildDataListContainer = () => {
+    const container = document.createElement("div");
+    container.className = "dataListContainerClass";
+
+    return { container };
+};

package/bin/table/v2/commands/table/template/V6/UI/BuilderVersions/V1/buildHeaderRow.js

@@ -0,0 +1,78 @@
+export const buildHeaderRow = ({ inTitleText = "Items" } = {}) => {
+    const titleText = inTitleText;
+
+    const header = createHeaderRoot();
+    const left = createLeftSection({ inTitleText: titleText });
+    const right = createSearchSection();
+
+    header.append(left, right.container);
+
+    return { header, searchInput: right.input };
+};
+
+const createHeaderRoot = () => {
+    const el = document.createElement("div");
+    el.className = "firstRowClass flex items-center justify-between px-6 pt-2 pb-2";
+    return el;
+};
+const createLeftSection = ({ inTitleText }) => {
+    const titleText = inTitleText;
+
+    const left = document.createElement("div");
+    left.className = "flex items-center gap-3";
+
+    const title = document.createElement("h5");
+    title.className = "tableNameClass text-lg font-semibold text-gray-900";
+    title.dataset.tableName = titleText;
+    title.textContent = titleText;
+
+    left.appendChild(title);
+
+    return left;
+};
+
+const createSearchSection = () => {
+    const container = document.createElement("div");
+    container.className = "relative w-full max-w-md";
+
+    const input = createSearchInput();
+    const icon = createSearchIcon();
+
+    container.append(input, icon);
+
+    return { container, input, icon };
+};
+const createSearchInput = () => {
+    const input = document.createElement("input");
+    input.type = "text";
+    input.placeholder = "search...";
+    input.className =
+        "tableSearchClass ks-search-allColumns w-full h-9 pl-3 pr-9 text-sm border border-gray-300 rounded-md outline-none";
+
+    return input;
+};
+const createSearchIcon = () => {
+    const input = document.createElement("input");
+
+    const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    svg.setAttribute("class", "absolute right-2 top-2 w-4 h-4 text-gray-400 cursor-pointer");
+    svg.setAttribute("fill", "none");
+    svg.setAttribute("stroke", "currentColor");
+    svg.setAttribute("viewBox", "0 0 24 24");
+    svg.setAttribute("stroke-width", "2");
+    svg.setAttribute("stroke-linecap", "round");
+    svg.setAttribute("stroke-linejoin", "round");
+
+    const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    path.setAttribute("d", "M21 21l-5.2-5.2M15 10a5 5 0 11-10 0 5 5 0 0110 0z");
+
+    svg.appendChild(path);
+
+    // ✅ CLICK EVENT
+    svg.addEventListener("click", () => {
+        input.focus();
+        input.dispatchEvent(new Event("input")); // trigger search manually if needed
+    });
+
+    return svg;
+};

package/bin/table/v2/commands/table/template/V6/UI/BuilderVersions/V1/buildTableShell.js

@@ -0,0 +1,23 @@
+const buildTableShell = ({ inTableClassName = "table bg-white table-fixed w-[1000px]" }) => {
+    const wrapper = document.createElement("div");
+    wrapper.className = "rounded-b-lg shadow-md overflow-x-auto tableParent";
+
+    const table = document.createElement("table");
+    table.className = inTableClassName;
+
+    const thead = document.createElement("thead");
+    thead.className = "theadClass";
+
+    const tbody = document.createElement("tbody");
+    tbody.className = "tbodyClass";
+
+    const tfoot = document.createElement("tfoot");
+    tfoot.className = "tfootClass";
+
+    table.append(thead, tbody, tfoot);
+    wrapper.append(table);
+
+    return { wrapper };
+};
+
+export default buildTableShell;

package/bin/table/v2/commands/table/template/V6/UI/SetFocus/V1/index.js

@@ -0,0 +1,7 @@
+const startFunc = ({ inContainerEl }) => {
+    const focusControl = inContainerEl.querySelector(".tableSearchClass");
+
+    focusControl?.focus();
+};
+
+export default startFunc;

package/bin/table/v2/commands/table/template/V6/UI/SetFocus/V2/index.js

@@ -0,0 +1,9 @@
+const startFunc = ({ inContainerEl }) => {
+    const firstControl = inContainerEl.querySelector(
+        ".verticalForm [tabindex], .verticalForm input, .verticalForm select, .verticalForm textarea, .verticalForm button"
+    );
+
+    firstControl?.focus();
+};
+
+export default startFunc;

package/bin/table/v2/commands/table/template/V6/UI/SetFocus/V3/index.js

@@ -0,0 +1,20 @@
+const startFunc = ({ inContainerEl }) => {
+    // debugger;
+    focusToFooter({ inContainerEl });
+};
+
+const focusToFooter = ({ inContainerEl }) => {
+    const firstControl = inContainerEl.querySelector(
+        "tfoot input, tfoot select, tfoot textarea"
+    );
+
+    firstControl?.focus();
+};
+
+const focusToSearch = ({ inContainerEl }) => {
+    const focusControl = inContainerEl.querySelector(".tableSearchClass");
+
+    focusControl?.focus();
+};
+
+export default startFunc;