tailwind-table-dom 1.1.6 → 1.2.8

package/bin/table/v2/commands/table/template/v9/BuildVerticalWithVersions/V2/BuildTableVersions/V2/init.js

@@ -0,0 +1,61 @@
+import { buildHeader } from "./BuildHeaderVersions/V1/start.js";
+import { buildFooter } from "./BuildFooterVersions/V3/start.js";
+import { pureBuildBody } from "./BuildBodyVersions/V1/pureBuildBody.js";
+import { lockTable } from "./lockTable.js";
+
+const initTable = ({ inContainerEl, inDataStore, inDom, inServices, inOptions, inEndPoints, inColumnsConfig,
+    inShowFooter, inData, inVisibleColumns, onDelete, inShowActions, inShowSerial, inIsDisabled,
+    inDefaultRow, inUiClasses, inShowTable }) => {
+    const data = inData;
+    const columns = inDataStore.getColumns();
+    const visibleColumns = inVisibleColumns;
+    const showActions = inShowActions;
+    const showSerial = inShowSerial;
+
+    buildHeader({
+        inVisibleColumns: visibleColumns,
+        inContainerEl,
+        inDom,
+        options: {
+            showActions,
+            showSerial
+        }
+    });
+
+    pureBuildBody({
+        inContainerEl,
+        inVisibleColumns: visibleColumns,
+        inData: data,
+        inDom,
+        options: {
+            showActions,
+            showSerial,
+            onEdit: ({ item }) => console.log("edit", item),
+            onDelete
+        }
+    });
+
+    if (inShowFooter) {
+        buildFooter({
+            inContainerEl,
+            inDataStore,
+            inDom,
+            inServices,
+            inOptions,
+            inEndPoints,
+            inColumnsConfig,
+            inVisibleColumns,
+            inShowActions,
+            inShowSerial,
+            inDefaultRow,
+            inTdClass: inUiClasses.tdClass,
+            inSerialClass: inUiClasses.serialClass,
+            inShowTable
+        });
+    };
+
+    lockTable({ inContainerEl, inIsDisabled });
+    // hookAllListeners({ inContainerEl, inDataStore, inDom, inOptions });
+};
+
+export { initTable };

package/bin/table/v2/commands/table/template/v9/BuildVerticalWithVersions/V2/BuildTableVersions/V2/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/v9/BuildVerticalWithVersions/V2/BuildTableVersions/V2/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/v9/BuildVerticalWithVersions/V2/afterMutation.js

@@ -0,0 +1,46 @@
+import { refreshTable } from "./refresh.js";
+
+const afterMutation = async ({
+    inServices,
+    inEndPoints,
+    inDataStore,
+    inContainerEl,
+    inDom,
+    inOptions,
+    inVisibleColumns,
+    onDelete,
+    isBuildDataLists,
+    inShowActions, inShowSerial,
+    inShowTable
+}) => {
+
+    // 1. get fresh data
+    const freshData = await inServices.actions.getData({
+        inEndPoint: inEndPoints.read
+    });
+
+    // 2. update store
+    inDataStore.setData(freshData);
+
+    if (inShowTable) {
+        // 3. refresh UI (only body)
+        refreshTable({
+            inContainerEl, inDataStore, inDom, inOptions,
+            inVisibleColumns, inServices, inEndPoints,
+            onDelete, isBuildDataLists, inShowActions,
+            inShowSerial
+        });
+
+        // 4. restore focus (optional)
+        focusFooter({ inContainerEl });
+    };
+};
+
+const focusFooter = ({ inContainerEl }) => {
+    const el = inContainerEl.querySelector(
+        "tfoot input, tfoot select, tfoot textarea"
+    );
+    el?.focus();
+};
+
+export { afterMutation };

package/bin/table/v2/commands/table/template/v9/BuildVerticalWithVersions/V2/initRender.js

@@ -0,0 +1,70 @@
+import { buildForm } from "./BuildForm/start.js";
+import { buildDataLists } from "./BuildDataLists/addToDom.js";
+
+const initRender = ({ inContainerEl, inDataStore, inDom, inServices, inOptions, inEndPoints,
+    inColumnsConfig, inUiClasses, callbacks, inConfig }) => {
+
+    const data = inDataStore.getData();
+    const columns = inDataStore.getColumns();
+    const visibleColumns = inDataStore.getVisibleColumns();
+    const visibleColumnsConfig = inDataStore.getVisibleColumnsConfig();
+    // debugger
+    const defaultRow = inDataStore.getDefaultRow();
+
+    const isBuildDataLists = inOptions.dataList.show;
+    const showActions = inOptions.table.showRowOptions;
+    const showSerial = inOptions.table.showSerial;
+    const showTable = inOptions.table.showTable;
+
+    // debugger;
+    if (isBuildDataLists) {
+        buildDataLists({
+            inContainerEl,
+            inDataStore,
+            inDom,
+            inVisibleColumns: visibleColumns,
+            inData: data
+        });
+    };
+// debugger;
+    if (inConfig.layout.type === "vertical") {
+        const inIsDisabled = inOptions.vertical.isDisabled;
+        const showSaveButton = inOptions.vertical.showSaveButton;
+        const findData = inDataStore.getFindData();
+        // debugger;
+        buildForm({
+            inContainerEl,
+            inDataStore,
+            inDom,
+            inServices,
+            inOptions,
+            inEndPoints,
+            inColumnsConfig,
+            inShowFooter: inOptions.table.showFooter,
+            inData: data,
+            inVisibleColumns: visibleColumns,
+            inVisibleColumnsConfig: visibleColumnsConfig,
+            inShowActions: showActions,
+            inShowSerial: showSerial,
+            isBuildDataLists,
+            inDefaultRow: defaultRow,
+            uiClasses: inUiClasses.form,
+            inIsDisabled: inIsDisabled,
+            showSaveButton,
+            inFindData: findData,
+            inShowTable: showTable,
+            incallbacks: callbacks
+        });
+
+        focusFirstInput({ inContainerEl })
+    };
+};
+
+const focusFirstInput = ({ inContainerEl }) => {
+    const el = inContainerEl.querySelector(
+        "input, select, textarea"
+    );
+    el?.focus();
+};
+
+export { initRender };

package/bin/table/v2/commands/table/template/v9/BuildVerticalWithVersions/V2/refresh.js

@@ -0,0 +1,31 @@
+import { buildDataLists } from "./BuildDataLists/addToDom.js";
+import { pureBuildBody } from "./BuildTableVersions/V2/BuildBodyVersions/V1/pureBuildBody.js";
+
+const refreshTable = ({ inContainerEl, inDataStore, inDom, inOptions, inVisibleColumns,
+    inServices, inEndPoints, onDelete, isBuildDataLists = false, inShowActions, inShowSerial }) => {
+    const data = inDataStore.getData();
+    const visibleColumns = inVisibleColumns;
+
+    if (isBuildDataLists) {
+        buildDataLists({
+            inContainerEl,
+            inDataStore,
+            inDom
+        });
+    };
+
+    pureBuildBody({
+        inContainerEl,
+        inData: data,
+        inVisibleColumns: visibleColumns,
+        inDom,
+        options: {
+            showActions: inShowActions,
+            showSerial: inShowSerial,
+            onEdit: ({ item }) => console.log("edit", item),
+            onDelete
+        }
+    });
+};
+
+export { refreshTable };

package/bin/table/v2/commands/table/template/v9/BuildVerticalWithVersions/V2/start.js

@@ -0,0 +1,80 @@
+import { renderTableHeading } from "./BuildFirstColumn/TableHeading/start.js";
+import { initTable } from "./BuildTable/init.js";
+import { refreshTable } from "./BuildTable/refresh.js";
+import { buildForm } from "./BuildForm/start.js";
+import { buildDataLists } from "./BuildDataLists/addToDom.js";
+
+const render1 = ({ inContainerEl, inDataStore, inDom, inServices, inOptions, inEndPoints }) => {
+    buildDataLists({
+        inContainerEl,
+        inDataStore,
+        inDom
+    });
+
+    if (inOptions.vertical.showVertical) {
+        buildForm({
+            inContainerEl,
+            inDataStore,
+            inDom
+        });
+    };
+
+    renderTableHeading({
+        inContainerEl,
+        inDataStore,
+        inDom
+    });
+
+    buildTable({
+        inContainerEl,
+        inDataStore,
+        inDom,
+        inServices,
+        inOptions,
+        inEndPoints
+    });
+};
+
+const refresh = ({ inContainerEl, inDataStore, inDom, inServices, inOptions, inEndPoints }) => {
+    buildDataLists({
+        inContainerEl,
+        inDataStore,
+        inDom
+    });
+
+    refreshTable({
+        inContainerEl,
+        inDataStore,
+        inDom,
+        inServices,
+        inOptions,
+        inEndPoints
+    });
+};
+
+const initRender = ({ inContainerEl, inDataStore, inDom, inServices, inOptions, inEndPoints }) => {
+    if (inOptions.vertical.showVertical) {
+        buildForm({
+            inContainerEl,
+            inDataStore,
+            inDom
+        });
+    };
+
+    renderTableHeading({
+        inContainerEl,
+        inDataStore,
+        inDom
+    });
+
+    initTable({
+        inContainerEl,
+        inDataStore,
+        inDom,
+        inServices,
+        inOptions,
+        inEndPoints
+    });
+};
+
+export { initRender, refresh };

package/bin/table/v2/commands/table/template/v9/Core/applyMode.js

@@ -0,0 +1,41 @@
+const applyMode = (config) => {
+
+    if (config.mode === "create") {
+        delete config.endPoints?.find;
+
+        // 🔥 ADD THIS LINE
+        config.options.table.showTable = false;
+
+        if (config.layout.type === "vertical-table") {
+            config.options.table.showTable = true;
+            config.options.table.isDisabled = false;
+        };
+
+        if (config.layout.type === "table") {
+            config.options.table.showTable = true;
+            config.options.table.isDisabled = false;
+            config.options.table.showFooter = true;
+
+            config.options.vertical.showVertical = false;
+        };
+    };
+
+    if (config.mode === "show") {
+        if (config.layout.type === "vertical") {
+            config.options.table.showTable = false;
+            config.options.table.isDisabled = true;
+
+            config.options.vertical.isDisabled = true;
+            config.options.vertical.showSaveButton = false;
+
+            if (!config.endPoints?.find) {
+                throw new Error("find endpoint required");
+            };
+        };
+
+    };
+
+    return config;
+};
+
+export { applyMode };

package/bin/table/v2/commands/table/template/v9/Core/loadDataFlow.js

@@ -0,0 +1,25 @@
+// /Core/loadDataFlow.js
+
+import { loadInitialData } from "../DataLayer/loadInitialData.js";
+import { loadDataLists } from "../Services/dataListLoader.js";
+
+export const loadDataFlow = async ({
+    config,
+    services,
+    dataStore,
+    endPoints
+}) => {
+    // debugger;
+    await loadInitialData({
+        config,
+        services,
+        dataStore,
+        endPoints
+    });
+
+    await loadDataLists({
+        inDataStore: dataStore,
+        inServices: services,
+        inEndpoints: endPoints
+    });
+};

package/bin/table/v2/commands/table/template/v9/Core/loadVerticalOnly.js

@@ -0,0 +1,14 @@
+import { loadDataLists } from "../Services/dataListLoader.js";
+
+export const loadVerticalOnly = async ({
+    config,
+    services,
+    dataStore,
+    endPoints
+}) => {
+    await loadDataLists({
+        inDataStore: dataStore,
+        inServices: services,
+        inEndpoints: endPoints
+    });
+};

package/bin/table/v2/commands/table/template/v9/DataLayer/loadInitialData.js

@@ -0,0 +1,69 @@
+const getIdFromUrl = () => {
+    const params = new URLSearchParams(window.location.search);
+    return params.get("pk");
+};
+
+const loadInitialData = async ({
+    config,
+    services,
+    dataStore,
+    endPoints
+}) => {
+    const { data } = config;
+
+    // 1. Static data
+    if (Array.isArray(data)) {
+        dataStore.setData(data);
+        return;
+    }
+    // debugger
+    // 2. Read API
+    if (endPoints?.read) {
+        const dataFromFetch = await services.actions.getData({
+            inEndPoint: endPoints.read
+        });
+
+        if (!Array.isArray(dataFromFetch)) {
+            throw new Error("read endpoint must return array");
+        };
+
+        dataStore.setData(dataFromFetch);
+    };
+    // debugger;
+    // 3. Find API (dynamic id)
+    if (endPoints?.find) {
+        const id = getIdFromUrl();
+
+        if (id) {
+            const dataFromFetch = await services.actions.find({
+                inEndPoint: endPoints.find,
+                id
+            });
+
+            dataStore.setFindData(dataFromFetch);
+        };
+    };
+
+    if (endPoints?.filter) {
+        const id = getIdFromUrl();
+
+        if (id) {
+            const dataFromFetch = await services.actions.find({
+                inEndPoint: endPoints.find,
+                id
+            });
+
+            dataStore.setFindData(dataFromFetch);
+        }
+    };
+
+    if (endPoints.findFromParams) {
+        const dataFromFetch = await services.actions.findFromParams({
+            inEndPoint: endPoints.findFromParams
+        });
+
+        dataStore.setFindFromParams(dataFromFetch);
+    };
+};
+
+export { loadInitialData };

package/bin/table/v2/commands/table/template/v9/DomManipulation/start.js

@@ -0,0 +1,45 @@
+export const getDomManipulation = () => {
+
+    const getTableHeader = (tableContainer) => {
+        return tableContainer.querySelector(".theadClass");
+    };
+
+    const getTableFooter = (tableContainer) => {
+        return tableContainer.querySelector(".tfootClass");
+    };
+
+    const getTableBody = (tableContainer) => {
+        return tableContainer.querySelector(".tbodyClass");
+    };
+
+    const getSearchInput = (tableContainer) => {
+        return tableContainer.querySelector(".tableSearchClass");
+    };
+
+    const getSearchSingleColumnInput = (tableContainer) => {
+        return tableContainer.querySelector(".tableSearchSingleColumnClass");
+    };
+
+    const getTableNameClass = (tableContainer) => {
+        return tableContainer.querySelector(".tableNameClass");
+    };
+
+    const getDataListContainerClass = (tableContainer) => {
+        return tableContainer.querySelector(".dataListContainerClass");
+    };
+
+    const getFirstRowClass = (tableContainer) => {
+        return tableContainer.querySelector(".firstRowClass");
+    };
+
+    const getInputValueFromRow = (tr, key) => {
+        return tr.querySelector(`[name="${key}"]`)?.value || "";
+    };
+
+    return {
+        getTableHeader, getTableBody, getSearchInput,
+        getSearchSingleColumnInput,
+        getTableNameClass, getTableFooter, getDataListContainerClass,
+        getInputValueFromRow, getFirstRowClass
+    };
+};

package/bin/table/v2/commands/table/template/v9/FocusSet/V1/focusSet.js

@@ -0,0 +1,21 @@
+const focusToEl = ({ inContainerEl }) => {
+
+    // 1. try footer inputs
+    let el = inContainerEl.querySelector(
+        "tfoot input, tfoot select, tfoot textarea"
+    );
+
+    if (el) {
+        el.focus();
+        return;
+    }
+
+    // 2. fallback → search input (header/global)
+    el = document.querySelector("input[type='search'], input[placeholder*='search']");
+
+    if (el && el.offsetParent !== null) { // visible check
+        el.focus();
+    }
+};
+
+export { focusToEl };

package/bin/table/v2/commands/table/template/v9/FocusSet/V2/focusSet.js

@@ -0,0 +1,44 @@
+const focusToEl = ({ inContainerEl, inPriority }) => {
+
+    const containerEl = inContainerEl;
+    const priority = inPriority;
+
+    let el = null;
+
+    for (let i = 0; i < priority.length; i++) {
+
+        const type = priority[i];
+
+        // 🔹 vertical
+        if (type === "vertical") {
+            const findVertical = "verticalForm";
+
+            el = containerEl.querySelector(
+                `.${findVertical} input, .${findVertical} select, .${findVertical} textarea`
+            );
+        }
+
+        // 🔹 footer
+        else if (type === "footer") {
+            el = containerEl.querySelector(
+                "tfoot input, tfoot select, tfoot textarea"
+            );
+        }
+
+        // 🔹 search
+        else if (type === "search") {
+            el = document.querySelector(
+                "input[type='search'], input[placeholder*='search']"
+            );
+        }
+
+        // ✅ if found → focus and stop
+        if (el && el.offsetParent !== null) {
+            el.focus();
+            return;
+        }
+    }
+
+};
+
+export { focusToEl };

package/bin/table/v2/commands/table/template/v9/HtmlState/start.js

@@ -0,0 +1,16 @@
+export const createState = () => {
+    let tableContainerId = "kSTableContainer";
+    const tableNameClass = "tableNameClass";
+
+    return {
+        setTableContainerId(val) {
+            tableContainerId = val;
+        },
+        getTableContainerId() {
+            return tableContainerId;
+        },
+        getTableNameClass() {
+            return tableNameClass;
+        }
+    };
+};

package/bin/table/v2/commands/table/template/v9/SearchTable/CreateHeaderRow/CreateHeaderCell/assemble.js

@@ -0,0 +1,6 @@
+const assembleHeader = (wrapper, text, icon) => {
+    wrapper.appendChild(text);
+    wrapper.appendChild(icon);
+};
+
+export { assembleHeader };

package/bin/table/v2/commands/table/template/v9/SearchTable/CreateHeaderRow/CreateHeaderCell/createSortIcon.js

@@ -0,0 +1,25 @@
+const createSortIcon = () => {
+    const svgNS = "http://www.w3.org/2000/svg";
+
+    const svg = document.createElementNS(svgNS, "svg");
+    svg.setAttribute("viewBox", "0 0 24 24");
+    svg.setAttribute("fill", "none");
+    svg.setAttribute("stroke", "currentColor");
+    svg.setAttribute("stroke-width", "2");
+    svg.setAttribute("class", "w-4 h-4 text-gray-400");
+    svg.setAttribute("data-sort-icon", "true");
+
+    const path = document.createElementNS(svgNS, "path");
+    path.setAttribute("stroke-linecap", "round");
+    path.setAttribute("stroke-linejoin", "round");
+    path.setAttribute(
+        "d",
+        "M8.25 15L12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9"
+    );
+
+    svg.appendChild(path);
+
+    return svg;
+};
+
+export { createSortIcon };

package/bin/table/v2/commands/table/template/v9/SearchTable/CreateHeaderRow/CreateHeaderCell/createTH.js

@@ -0,0 +1,12 @@
+const createTH = (key) => {
+    const th = document.createElement("th");
+
+    th.className =
+        "px-6 py-3 text-left border-b border-gray-200 bg-gray-50 hover:bg-gray-100 transition-colors cursor-pointer";
+
+    th.dataset.key = key;
+
+    return th;
+};
+
+export { createTH };

package/bin/table/v2/commands/table/template/v9/SearchTable/CreateHeaderRow/CreateHeaderCell/createText.js

@@ -0,0 +1,7 @@
+const createText = (key) => {
+    const span = document.createElement("span");
+    span.textContent = key;
+    return span;
+};
+
+export { createText };