tailwind-table-dom 1.1.6

package/bin/table/v2/commands/table/template/v4/BuildTableOnlyWithVersions/V1/BuildTableVersions/V2/BuildFooterVersions/V6/start.js

@@ -0,0 +1,35 @@
+import { startFunc as createHandleSave } from "./CreateHandleSave/start.js";
+import { startFunc as createHandleOnChange } from "./CreateHandleOnChange/start.js";
+import { startFunc as createFooter } from "./CreateFooter/start.js";
+import { appendFooter } from "./DomManipulation/appendFooter.js";
+
+const buildFooter = (inOptions) => {
+    const localVisibleColumns =
+        inOptions.inVisibleColumns;
+
+    const localHandleSave =
+        createHandleSave(inOptions);
+    debugger;
+    // const localHandleOnChange =
+    //     createHandleOnChange(inOptions);
+    const localHandleOnChange = createHandleOnChange({
+        inDataStore: inOptions.inDataStore,
+        inColumnsConfig: inOptions.inColumnsConfig,
+        inToSaveRow: inOptions.inToSaveRow
+    });
+
+    const localTr = createFooter({
+        inData: inOptions,
+        localVisibleColumns,
+        localHandleSave,
+        localHandleOnChange
+    });
+
+    appendFooter({
+        inDom: inOptions.inDom,
+        inContainerEl: inOptions.inContainerEl,
+        inTr: localTr
+    });
+};
+
+export { buildFooter };

package/bin/table/v2/commands/table/template/v4/BuildTableOnlyWithVersions/V1/BuildTableVersions/V2/BuildHeaderVersions/V1/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/v4/BuildTableOnlyWithVersions/V1/BuildTableVersions/V2/BuildHeaderVersions/V1/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/v4/BuildTableOnlyWithVersions/V1/BuildTableVersions/V2/BuildHeaderVersions/V1/CreateHeaderRow/CreateHeaderCell/createTH.js

@@ -0,0 +1,21 @@
+const createTH = ({ inKey, inClassName }) => {
+    // Create table header cell
+    const th = document.createElement("th");
+
+    // If external class is provided → respect and use it
+    if (inClassName) {
+        th.className = inClassName;
+    } else {
+        // Otherwise → fallback to default internal styling
+        th.className =
+            "px-6 py-3 text-left border-b border-gray-200 bg-gray-50 hover:bg-gray-100 transition-colors cursor-pointer";
+    };
+
+    // Attach key for sorting / identification
+    th.dataset.key = inKey;
+
+    // Return configured header cell
+    return th;
+};
+
+export { createTH };

package/bin/table/v2/commands/table/template/v4/BuildTableOnlyWithVersions/V1/BuildTableVersions/V2/BuildHeaderVersions/V1/CreateHeaderRow/CreateHeaderCell/createText.js

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

package/bin/table/v2/commands/table/template/v4/BuildTableOnlyWithVersions/V1/BuildTableVersions/V2/BuildHeaderVersions/V1/CreateHeaderRow/CreateHeaderCell/createWrapper.js

@@ -0,0 +1,14 @@
+import { createText } from "./createText.js";
+import { createSortIcon } from "./createSortIcon.js";
+
+const createWrapper = (key) => {
+    const div = document.createElement("div");
+    div.className = "flex items-center gap-1 text-base font-bold text-gray-800";
+
+    div.appendChild(createText(key));
+    div.appendChild(createSortIcon());
+
+    return div;
+};
+
+export { createWrapper };

package/bin/table/v2/commands/table/template/v4/BuildTableOnlyWithVersions/V1/BuildTableVersions/V2/BuildHeaderVersions/V1/CreateHeaderRow/CreateHeaderCell/start.js

@@ -0,0 +1,15 @@
+import { createTH } from "./createTH.js";
+import { createWrapper } from "./createWrapper.js";
+
+const createHeaderCell = ({ inKey, inClassName }) => {
+    const th = createTH({ inKey, inClassName });
+
+    const wrapper = createWrapper(inKey);
+
+    // attach to TH
+    th.appendChild(wrapper);
+
+    return th;
+};
+
+export { createHeaderCell };

package/bin/table/v2/commands/table/template/v4/BuildTableOnlyWithVersions/V1/BuildTableVersions/V2/BuildHeaderVersions/V1/CreateHeaderRow/insertCells.js

@@ -0,0 +1,12 @@
+import { createHeaderCell } from "./CreateHeaderCell/start.js";
+
+const startFunc = ({ inVisibleColumns, tr, inClassName }) => {
+    inVisibleColumns.forEach(key => {
+        tr.appendChild(createHeaderCell({
+            inKey: key,
+            inClassName
+        }));
+    });
+};
+
+export { startFunc };

package/bin/table/v2/commands/table/template/v4/BuildTableOnlyWithVersions/V1/BuildTableVersions/V2/BuildHeaderVersions/V1/CreateHeaderRow/start.js

@@ -0,0 +1,47 @@
+import { startFunc as insertRowCells } from "./insertCells.js";
+
+const startFunc = ({ options, inVisibleColumns, inThClassName, inTrClassName,
+    inThSerialClassName
+}) => {
+    const tr = document.createElement("tr");
+
+    if (inTrClassName) {
+        tr.className = inTrClassName;
+    };
+
+    if (options.showSerial) tr.appendChild(getSerialColumn({ inClassName: inThSerialClassName }));
+
+    insertRowCells({
+        tr, inVisibleColumns,
+        inClassName: inThClassName
+    });
+
+    if (options.showActions) {
+        tr.appendChild(getOptionsColumn());
+    };
+
+    return tr;
+};
+
+const getSerialColumn = ({ inClassName }) => {
+    const thIndex = document.createElement("th");
+    thIndex.textContent = "#";
+
+    if (inClassName) {
+        thIndex.className = inClassName;
+    } else {
+        thIndex.className = "px-4 py-2 border";
+    };
+    // thIndex.className = "px-4 py-2 border";
+
+    return thIndex
+};
+
+const getOptionsColumn = () => {
+    const thIndex = document.createElement("th");
+    thIndex.textContent = "options";
+
+    return thIndex
+};
+
+export { startFunc };

package/bin/table/v2/commands/table/template/v4/BuildTableOnlyWithVersions/V1/BuildTableVersions/V2/BuildHeaderVersions/V1/start.js

@@ -0,0 +1,19 @@
+import { startFunc as createHeaderRow } from "./CreateHeaderRow/start.js";
+
+const buildHeader = ({ inContainerEl, inDom, options, inVisibleColumns, inThClassName,
+    inTrClassName, inThSerialClassName }) => {
+    const containerEl = inContainerEl;
+
+    const tr = createHeaderRow({
+        options, inVisibleColumns, inThClassName,
+        inTrClassName, inThSerialClassName
+    });
+    
+    const tableHeader = inDom.getTableHeader(containerEl);
+
+    tableHeader.innerHTML = "";
+
+    tableHeader.appendChild(tr);
+};
+
+export { buildHeader };

package/bin/table/v2/commands/table/template/v4/BuildTableOnlyWithVersions/V1/BuildTableVersions/V2/DeleteRow/afterMutation.js

@@ -0,0 +1,38 @@
+import { refreshTable } from "../refresh.js";
+
+const afterMutation = async ({
+    inServices,
+    inEndPoints,
+    inDataStore,
+    inContainerEl,
+    inDom,
+    inOptions,
+    inVisibleColumns
+}) => {
+
+    // 1. get fresh data
+    const freshData = await inServices.actions.getData({
+        inEndPoint: inEndPoints.read
+    });
+
+    // 2. update store
+    inDataStore.setData(freshData);
+
+    // 3. refresh UI (only body)
+    refreshTable({
+        inContainerEl, inDataStore, inDom, inOptions,
+        inVisibleColumns
+    });
+
+    // 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/v4/BuildTableOnlyWithVersions/V1/BuildTableVersions/V2/init.js

@@ -0,0 +1,66 @@
+import { buildHeader } from "./BuildHeaderVersions/V1/start.js";
+import { buildFooter } from "./BuildFooterVersions/V6/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, inToSaveRow }) => {
+
+    const data = inData;
+    const columns = inDataStore.getColumns();
+    const visibleColumns = inVisibleColumns;
+    const showActions = inShowActions;
+    const showSerial = inShowSerial;
+    // debugger;
+    buildHeader({
+        inVisibleColumns: visibleColumns,
+        inContainerEl,
+        inDom,
+        options: {
+            showActions,
+            showSerial
+        },
+        inThClassName: inUiClasses?.thead?.thClass,
+        inTrClassName: inUiClasses?.thead?.trClass,
+        inThSerialClassName: inUiClasses?.thead?.thSerialClass,
+    });
+
+    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?.tfoot?.tdClass,
+            inSerialClass: inUiClasses?.tfoot?.serialClass,
+            inShowTable,
+            inToSaveRow
+        });
+    };
+
+    lockTable({ inContainerEl, inIsDisabled });
+    // hookAllListeners({ inContainerEl, inDataStore, inDom, inOptions });
+};
+
+export { initTable };

package/bin/table/v2/commands/table/template/v4/BuildTableOnlyWithVersions/V1/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/v4/BuildTableOnlyWithVersions/V1/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/v4/BuildTableOnlyWithVersions/V1/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/v4/BuildTableOnlyWithVersions/V1/initRender.js

@@ -0,0 +1,99 @@
+import { renderTableHeading } from "./BuildFirstColumn/TableHeading/start.js";
+import { initTable } from "./BuildTableVersions/V2/init.js";
+import { buildForm } from "./BuildForm/start.js";
+import { buildDataLists } from "./BuildDataLists/addToDom.js";
+import { hookAllListeners } from "./AddListeners/start.js";
+import { afterMutation } from "./afterMutation.js";
+
+const initRender = ({ inContainerEl, inDataStore, inDom, inServices, inOptions, inEndPoints,
+    inColumnsConfig, inUiClasses, callbacks, inConfig, inToSaveRow }) => {
+
+    const data = inDataStore.getData();
+    const columns = inDataStore.getColumns();
+    const visibleColumns = inDataStore.getVisibleColumns();
+    const visibleColumnsConfig = inDataStore.getVisibleColumnsConfig();
+    // debugger
+    const defaultRow = inDataStore.getDefaultRow();
+    const toSaveRow = inDataStore.getToSaveRow();
+
+    const isBuildDataLists = inOptions.dataList.show;
+    const showActions = inOptions.table.showRowOptions;
+    const showSerial = inOptions.table.showSerial;
+    const showTable = inOptions.table.showTable;
+
+    const handleDelete = async ({ presentPk }) => {
+        const fromDelete = await inServices.actions.table.delete({
+            inEndPoint: inEndPoints.delete,
+            id: presentPk
+        })
+        // debugger;
+        if (fromDelete.ok) {
+            if (inConfig?.callbacks?.table?.onDelete) {
+                const fromClient = await inConfig?.callbacks?.table?.onDelete({ toDeletePk: presentPk });
+
+                if (fromClient.ok) {
+
+                    afterMutation({
+                        inServices, inEndPoints, inDataStore, inContainerEl,
+                        inDom, inOptions, inVisibleColumns: visibleColumns,
+                        onDelete: handleDelete, isBuildDataLists,
+                        inShowActions: showActions,
+                        inShowSerial: showSerial, inShowTable: showTable
+                    });
+                };
+            };
+        };
+
+    };
+    // debugger;
+    if (isBuildDataLists) {
+        buildDataLists({
+            inContainerEl,
+            inDataStore,
+            inDom,
+            inVisibleColumns: visibleColumns,
+            inData: data
+        });
+    };
+
+    if (inOptions.firstRow.showSearch) {
+        renderTableHeading({
+            inContainerEl,
+            inDataStore,
+            inDom
+        });
+    } else {
+        const firstRow = inDom.getFirstRowClass(inContainerEl);
+
+        firstRow.style.display = "none";
+    };
+
+    if (showTable) {
+        const inIsDisabled = inOptions.table.isDisabled;
+
+        initTable({
+            inContainerEl,
+            inDataStore,
+            inDom,
+            inServices,
+            inOptions,
+            inEndPoints,
+            inColumnsConfig,
+            inShowFooter: inOptions.table.showFooter,
+            inData: data,
+            inVisibleColumns: visibleColumns,
+            onDelete: handleDelete,
+            inShowActions: showActions,
+            inShowSerial: showSerial,
+            inIsDisabled: inIsDisabled,
+            inDefaultRow: defaultRow,
+            inUiClasses: inUiClasses?.tableComplete,
+            inShowTable: showTable,
+            inToSaveRow: toSaveRow
+        });
+    };
+
+    hookAllListeners({ inContainerEl, inDataStore, inDom, inOptions });
+};
+
+export { initRender };

package/bin/table/v2/commands/table/template/v4/BuildTableOnlyWithVersions/V1/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/v4/BuildTableOnlyWithVersions/V1/start.js

@@ -0,0 +1,49 @@
+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 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/v4/BuildTableOnlyWithVersions/V2/AddListeners/start.js

@@ -0,0 +1,15 @@
+import { funcToRun as funcToRunFortableSearch } from "./tableSearch/start.js";
+
+const hookAllListeners = ({ inContainerEl, inDataStore, inDom, inOptions }) => {
+    const columns = inDataStore.getColumns();
+    const visibleColumns = inDataStore.getVisibleColumns();
+
+    funcToRunFortableSearch({
+        inContainerEl, inDataStore,
+        inDom, inColumns: columns,
+        inVisibleColumns: visibleColumns,
+        inOptions
+    });
+};
+
+export { hookAllListeners };

package/bin/table/v2/commands/table/template/v4/BuildTableOnlyWithVersions/V2/AddListeners/tableSearch/atThatState.js

@@ -0,0 +1,23 @@
+import { buildRows } from './orchestrator.js';
+
+const buildBodyAtThatState = ({
+    inColumns,
+    inDataToShow,
+    inContainerEl,
+    inDom,
+    searchValue = ""
+}) => {
+
+    const tableBody = inDom.getTableBody(inContainerEl);
+    tableBody.innerHTML = '';
+
+    const rows = buildRows({
+        data: inDataToShow,
+        columns: inColumns,
+        searchValue
+    });
+
+    rows.forEach(tr => tableBody.appendChild(tr));
+};
+
+export { buildBodyAtThatState };

package/bin/table/v2/commands/table/template/v4/BuildTableOnlyWithVersions/V2/AddListeners/tableSearch/createCell.js

@@ -0,0 +1,12 @@
+import { highlightText } from "./highlight.js";
+
+const createCell = ({ value, searchValue }) => {
+    const td = document.createElement('td');
+    td.className = 'px-4 py-2 border';
+
+    td.innerHTML = highlightText(value, searchValue);
+
+    return td;
+};
+
+export { createCell };