tailwind-table-dom 1.1.6

package/bin/table/v2/commands/table/template/V6/BuildTableVersions/V4/BuildFooterVersions/ForCreate/V4/CreateFooterRow/CreateFooterInput/AttachKeyDownEvent/ExecuteKeyDownType/qty.js

@@ -0,0 +1,29 @@
+import showCalcMessage from "./showCalcMessage.js";
+
+const rate = ({
+    currentInput
+}) => {
+    // console.log("currentInput : ", currentInput);
+
+    const closestTr =
+        currentInput.closest("tr");
+
+    const qty = Number(
+        closestTr.querySelector('[name="Qty"]').value
+    );
+
+    const rate = Number(
+        closestTr.querySelector('[name="Rate"]').value
+    );
+
+    const Amount = rate * qty;
+
+    closestTr.querySelector('[name="Amount"]').value = Amount;
+
+    showCalcMessage({
+        input: currentInput,
+        message: `Amount change : ${Amount}`
+    });
+};
+
+export default rate;

package/bin/table/v2/commands/table/template/V6/BuildTableVersions/V4/BuildFooterVersions/ForCreate/V4/CreateFooterRow/CreateFooterInput/AttachKeyDownEvent/ExecuteKeyDownType/showCalcMessage.js

@@ -0,0 +1,29 @@
+const showCalcMessage = ({
+    input,
+    message
+}) => {
+    let messageDiv =
+        input.parentElement.querySelector(
+            ".calc-message"
+        );
+
+    if (!messageDiv) {
+        messageDiv =
+            document.createElement("div");
+
+        messageDiv.className =
+            "calc-message text-xs text-green-600 mt-1";
+
+        input.parentElement.appendChild(
+            messageDiv
+        );
+    }
+
+    messageDiv.textContent = message;
+
+    setTimeout(() => {
+        messageDiv.remove();
+    }, 5000);
+};
+
+export default showCalcMessage;

package/bin/table/v2/commands/table/template/V6/BuildTableVersions/V4/BuildFooterVersions/ForCreate/V4/CreateFooterRow/CreateFooterInput/AttachKeyDownEvent/ExecuteKeyDownType/start.js

@@ -0,0 +1,24 @@
+import Amount from "./Amount.js";
+import qty from "./qty.js";
+
+const executeKeyDownType = ({
+    currentInput,
+    inOnKeyDownType
+}) => {
+    // console.log("inOnKeyDownType : ", inOnKeyDownType);
+
+    switch (inOnKeyDownType) {
+        case "Amount":
+            Amount({ currentInput });
+            break;
+
+        case "Qty":
+            qty({ currentInput });
+            break;
+
+        default:
+            break;
+    };
+};
+
+export default executeKeyDownType;

package/bin/table/v2/commands/table/template/V6/BuildTableVersions/V4/BuildFooterVersions/ForCreate/V4/CreateFooterRow/CreateFooterInput/AttachKeyDownEvent/executeKeyDownType.js

@@ -0,0 +1,27 @@
+const executeKeyDownType = ({
+    currentInput,
+    inOnKeyDownType
+}) => {
+    const closestTr = currentInput.closest("tr");
+
+    switch (inOnKeyDownType) {
+        case "Amount":
+            const qty = Number(
+                closestTr.querySelector('[name="Qty"]').value
+            );
+
+            const amount = Number(
+                closestTr.querySelector('[name="Amount"]').value
+            );
+
+            closestTr.querySelector('[name="Rate"]').value =
+                qty ? amount / qty : 0;
+
+            break;
+
+        default:
+            break;
+    }
+};
+
+export default executeKeyDownType;

package/bin/table/v2/commands/table/template/V6/BuildTableVersions/V4/BuildFooterVersions/ForCreate/V4/CreateFooterRow/CreateFooterInput/AttachKeyDownEvent/focusNextInput.js

@@ -0,0 +1,18 @@
+const focusNextInput = ({ currentInput }) => {
+    const allInputs = [
+        ...currentInput
+            .closest("tr")
+            .querySelectorAll("input")
+    ];
+
+    const index = allInputs.indexOf(currentInput);
+
+    if (
+        index !== -1 &&
+        index < allInputs.length - 1
+    ) {
+        allInputs[index + 1].focus();
+    }
+};
+
+export default focusNextInput;

package/bin/table/v2/commands/table/template/V6/BuildTableVersions/V4/BuildFooterVersions/ForCreate/V4/CreateFooterRow/CreateFooterInput/AttachKeyDownEvent/start.js

@@ -0,0 +1,32 @@
+import focusNextInput from "./focusNextInput.js";
+// import executeKeyDownType from "./executeKeyDownType.js";
+
+import executeKeyDownType from "./ExecuteKeyDownType/start.js";
+
+const attachKeyDownEvent = ({
+    input,
+    inOnKeyDown,
+    inOnKeyDownType
+}) => {
+    if (!inOnKeyDown) return;
+
+    input.addEventListener(
+        "keydown",
+        (event) => {
+            if (event.key !== "Enter") return;
+
+            const currentInput = event.currentTarget;
+
+            executeKeyDownType({
+                currentInput,
+                inOnKeyDownType
+            });
+
+            focusNextInput({
+                currentInput
+            });
+        }
+    );
+};
+
+export default attachKeyDownEvent;

package/bin/table/v2/commands/table/template/V6/BuildTableVersions/V4/BuildFooterVersions/ForCreate/V4/CreateFooterRow/CreateFooterInput/applyDataList.js

@@ -0,0 +1,21 @@
+const applyDataList = ({
+    input,
+    key,
+    showDataList,
+    inColumnsConfig
+}) => {
+    const findColumn = inColumnsConfig.find(
+        element => element.columnName === key
+    );
+
+    if (
+        showDataList &&
+        findColumn?.tableFooterDataListShow
+    ) {
+        input.setAttribute("list", `${key}List`);
+        input.dataset.dataListSource =
+            findColumn.dataListSource;
+    }
+};
+
+export default applyDataList;

package/bin/table/v2/commands/table/template/V6/BuildTableVersions/V4/BuildFooterVersions/ForCreate/V4/CreateFooterRow/CreateFooterInput/applyDefaultValue.js

@@ -0,0 +1,11 @@
+const applyDefaultValue = ({
+    input,
+    inDefaultValue
+}) => {
+    if (inDefaultValue === undefined) return;
+
+    input.value = inDefaultValue;
+    input.dataset.defaultValue = inDefaultValue;
+};
+
+export default applyDefaultValue;

package/bin/table/v2/commands/table/template/V6/BuildTableVersions/V4/BuildFooterVersions/ForCreate/V4/CreateFooterRow/CreateFooterInput/attachChangeEvent.js

@@ -0,0 +1,24 @@
+const attachChangeEvent = ({
+    input,
+    onChangeFunc
+}) => {
+    if (!onChangeFunc) return;
+
+    input.addEventListener(
+        "change",
+        (event) => {
+            const localCurrentTarget =
+                event.currentTarget;
+
+            const onChangeType =
+                localCurrentTarget.dataset.onChangeType;
+
+            onChangeFunc({
+                inCurrentTarget: localCurrentTarget,
+                inChangeType: onChangeType
+            });
+        }
+    );
+};
+
+export default attachChangeEvent;

package/bin/table/v2/commands/table/template/V6/BuildTableVersions/V4/BuildFooterVersions/ForCreate/V4/CreateFooterRow/CreateFooterInput/attachKeyDownEvent.js

@@ -0,0 +1,69 @@
+const attachKeyDownEvent = ({
+    input,
+    inOnKeyDown,
+    inOnKeyDownType
+}) => {
+    if (!inOnKeyDown) return;
+
+    const focusNextInput = ({ currentInput }) => {
+        const allInputs = [
+            ...currentInput
+                .closest("tr")
+                .querySelectorAll("input")
+        ];
+
+        const index = allInputs.indexOf(currentInput);
+
+        if (
+            index !== -1 &&
+            index < allInputs.length - 1
+        ) {
+            allInputs[index + 1].focus();
+        }
+    };
+
+    const executeKeyDownType = ({
+        currentInput
+    }) => {
+        const closestTr = currentInput.closest("tr");
+
+        switch (inOnKeyDownType) {
+            case "Amount":
+                const qty = Number(
+                    closestTr.querySelector('[name="Qty"]').value
+                );
+
+                const amount = Number(
+                    closestTr.querySelector('[name="Amount"]').value
+                );
+
+                closestTr.querySelector('[name="Rate"]').value =
+                    qty ? amount / qty : 0;
+
+                break;
+
+            default:
+                break;
+        }
+    };
+
+    input.addEventListener(
+        "keydown",
+        (event) => {
+            if (event.key !== "Enter") return;
+
+            const currentInput =
+                event.currentTarget;
+
+            executeKeyDownType({
+                currentInput
+            });
+
+            focusNextInput({
+                currentInput
+            });
+        }
+    );
+};
+
+export default attachKeyDownEvent;

package/bin/table/v2/commands/table/template/V6/BuildTableVersions/V4/BuildFooterVersions/ForCreate/V4/CreateFooterRow/CreateFooterInput/createInput.js

@@ -0,0 +1,12 @@
+const createInput = ({ key }) => {
+    const input = document.createElement("input");
+
+    input.type = "text";
+    input.placeholder = key;
+    input.name = key;
+    input.className = "w-full px-2 py-1 border rounded text-md";
+
+    return input;
+};
+
+export default createInput;

package/bin/table/v2/commands/table/template/V6/BuildTableVersions/V4/BuildFooterVersions/ForCreate/V4/CreateFooterRow/CreateFooterInput/start.js

@@ -0,0 +1,52 @@
+import createInput from "./createInput.js";
+import applyDataList from "./applyDataList.js";
+import applyDefaultValue from "./applyDefaultValue.js";
+import attachChangeEvent from "./attachChangeEvent.js";
+// import attachKeyDownEvent from "./attachKeyDownEvent.js";
+import attachKeyDownEvent from "./AttachKeyDownEvent/start.js";
+
+const createFooterInput = (args) => {
+    const {
+        key,
+        onChangeFunc,
+        showDataList,
+        inColumnsConfig,
+        inDefaultValue,
+        inOnChangeType,
+        inOnKeyDown,
+        inOnKeyDownType
+    } = args;
+
+    const input = createInput({ key });
+
+    if (inOnChangeType) {
+        input.dataset.onChangeType = inOnChangeType;
+    }
+
+    applyDataList({
+        input,
+        key,
+        showDataList,
+        inColumnsConfig
+    });
+
+    applyDefaultValue({
+        input,
+        inDefaultValue
+    });
+
+    attachChangeEvent({
+        input,
+        onChangeFunc
+    });
+
+    attachKeyDownEvent({
+        input,
+        inOnKeyDown,
+        inOnKeyDownType
+    });
+
+    return input;
+};
+
+export default createFooterInput;

package/bin/table/v2/commands/table/template/V6/BuildTableVersions/V4/BuildFooterVersions/ForCreate/V4/CreateFooterRow/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/V6/BuildTableVersions/V4/BuildFooterVersions/ForCreate/V4/CreateFooterRow/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/V6/BuildTableVersions/V4/BuildFooterVersions/ForCreate/V4/CreateFooterRow/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/V6/BuildTableVersions/V4/BuildFooterVersions/ForCreate/V4/CreateFooterRow/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/V6/BuildTableVersions/V4/BuildFooterVersions/ForCreate/V4/CreateFooterRow/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/V6/BuildTableVersions/V4/BuildFooterVersions/ForCreate/V4/CreateFooterRow/CreateHeaderCell/start.js

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

package/bin/table/v2/commands/table/template/V6/BuildTableVersions/V4/BuildFooterVersions/ForCreate/V4/CreateFooterRow/appendFooterSaveCell.js

@@ -0,0 +1,36 @@
+const appendFooterSaveCell = ({ inOnSaveFunc }) => {
+    // debugger
+    if (!inOnSaveFunc) return;
+
+    const td = document.createElement("td");
+    td.className = "px-4 py-2 border";
+    td.style.width = "100px";
+
+    const btn = document.createElement("button");
+    btn.textContent = "Save";
+    btn.className = "px-3 py-1 bg-green-500 text-white rounded";
+
+    btn.onclick = (e) => {
+        e.preventDefault(); // 🔥 THIS IS THE KEY
+        // debugger;
+        const currentTarget = e.currentTarget;
+        const closestFooter = currentTarget.closest("tfoot");
+        const inputs = closestFooter.querySelectorAll("input");
+        
+        const data = {};
+
+        inputs.forEach((input) => {
+            data[input.name] = input.value;
+        });
+
+        inOnSaveFunc({
+            dataFromDom: data, inCurrentTarget: currentTarget,
+        });
+    };
+
+    td.appendChild(btn);
+    // debugger
+    return td;
+};
+
+export { appendFooterSaveCell };

package/bin/table/v2/commands/table/template/V6/BuildTableVersions/V4/BuildFooterVersions/ForCreate/V4/CreateFooterRow/createFooterCell.js

@@ -0,0 +1,38 @@
+// createFooterCell.js
+
+// import { createFooterInput } from "./createFooterInput.js";
+import createFooterInput from "./CreateFooterInput/start.js";
+
+const createFooterCell = ({ key, onChangeFunc, showDataList, inColumnsConfig,
+    inDefaultValue, inTdClass, inAllowOnChange = false, inOnChangeType,
+    inOnKeyDown, inOnKeyDownType }) => {
+
+    let localChangeFunc;
+
+    const td = document.createElement("td");
+    td.className = inTdClass;
+
+    if (inAllowOnChange) {
+        localChangeFunc = onChangeFunc;
+    };
+
+    const input = createFooterInput({
+        key, onChangeFunc: localChangeFunc, inOnKeyDown, inOnKeyDownType,
+        showDataList, inColumnsConfig, inDefaultValue, inOnChangeType
+    });
+
+    const div = document.createElement("div");
+    div.className = "calc-message";
+
+    //     td.className = inTdClass;
+    // <div class="calc-message">
+    //     Rate calculated : 1500
+    // </div>
+    // debugger;
+    td.appendChild(input);
+    td.appendChild(div);
+
+    return td;
+};
+
+export { createFooterCell };

package/bin/table/v2/commands/table/template/V6/BuildTableVersions/V4/BuildFooterVersions/ForCreate/V4/CreateFooterRow/createFooterInput.js

@@ -0,0 +1,73 @@
+// createFooterInput.js
+
+const createFooterInput = ({ key, onChangeFunc, showDataList, inColumnsConfig,
+    inDefaultValue, inClasses, inOnChangeType, inOnKeyDown = false,
+    inOnKeyDownType
+}) => {
+    
+    const input = document.createElement("input");
+
+    input.type = "text";
+    input.placeholder = key;
+    input.name = key;
+    input.className = "w-full px-2 py-1 border rounded text-md";
+
+    if (inOnChangeType) input.dataset.onChangeType = inOnChangeType;
+
+    const findColumn = inColumnsConfig.find(element => {
+        return element.columnName === key;
+    });
+
+    if (showDataList && findColumn?.tableFooterDataListShow) {
+        input.setAttribute("list", `${key}List`);
+        input.dataset.dataListSource = findColumn.dataListSource;
+    };
+
+    if (inDefaultValue !== undefined) {
+        // default value is inserted in input value
+        input.value = inDefaultValue;
+        //need to add to dataset also for further use, like clear values
+        input.dataset.defaultValue = inDefaultValue;
+    };
+    // debugger;
+    // console.log(" : ", onChangeFunc);
+
+    if (onChangeFunc) {
+        input.addEventListener(
+            "change", (event) => {
+                const localCurrentTarget = event.currentTarget;
+                const onChangeType = localCurrentTarget.dataset.onChangeType;
+
+                // console.log("onChangeType : ", localCurrentTarget, localCurrentTarget.dataset, onChangeType);
+
+                onChangeFunc({
+                    inCurrentTarget: localCurrentTarget,
+                    inChangeType: onChangeType
+                });
+            }
+        );
+    };
+
+    if (inOnKeyDown) {
+        input.addEventListener(
+            "keydown", (event) => {
+                if (event.key === "Enter") {
+                    const localCurrentTarget = event.currentTarget;
+                    // const closestTr = localCurrentTarget.closest("tr");
+                    const currentTd = event.currentTarget.closest("td");
+                    const nextInput = currentTd?.nextElementSibling?.querySelector("input");
+
+                    if (nextInput) {
+                        nextInput.focus();
+                    };
+
+                    // console.log("Enter pressed");
+                };
+            }
+        );
+    };
+
+    return input;
+};
+
+export { createFooterInput };

package/bin/table/v2/commands/table/template/V6/BuildTableVersions/V4/BuildFooterVersions/ForCreate/V4/CreateFooterRow/insertCells.js

@@ -0,0 +1,45 @@
+import { createFooterCell } from "./createFooterCell.js";
+
+const startFunc = ({ keys, tr, options = {}, inDefaultRow, inTdClass,
+    inShowDataList, onChangeFunc, inVisibleColumnsConfig }) => {
+
+    const defaultRow = inDefaultRow;
+    // console.log("keys : ", keys, inVisibleColumnsConfig);
+
+    // keys.forEach(key => {
+    //     const defaultValue = defaultRow[key];
+
+    //     const createdFooterCell = createFooterCell({
+    //         key,
+    //         inDefaultValue: defaultValue,
+    //         onChangeFunc,
+    //         showDataList: inShowDataList,
+    //         inColumnsConfig: options.inColumnsConfig,
+    //         inTdClass
+    //     });
+
+    //     tr.appendChild(createdFooterCell);
+    // });
+
+    inVisibleColumnsConfig.forEach(loopColumn => {
+        const defaultValue = defaultRow[loopColumn.columnName];
+
+        const createdFooterCell = createFooterCell({
+            key: loopColumn.columnName,
+            inDefaultValue: defaultValue,
+            onChangeFunc,
+            showDataList: inShowDataList,
+            inColumnsConfig: options.inColumnsConfig,
+            inTdClass,
+            inAllowOnChange: loopColumn.allowOnChange,
+            inOnChangeType: loopColumn.onChangeType,
+            inOnKeyDown: loopColumn?.onKeyDown,
+            inOnKeyDownType: loopColumn?.onKeyDownType
+        });
+
+        tr.appendChild(createdFooterCell);
+    });
+
+};
+
+export { startFunc };

package/bin/table/v2/commands/table/template/V6/BuildTableVersions/V4/BuildFooterVersions/ForCreate/V4/CreateFooterRow/start.js

@@ -0,0 +1,30 @@
+import { startFunc as insertRowCells } from "./insertCells.js";
+import { appendFooterSaveCell } from "./appendFooterSaveCell.js";
+
+const startFunc = ({ keys, options, inDefaultRow, inTdClass,
+    inSerialClass, inShowSerial, inShowDataList, inShowSave = false,
+    inOnSaveFunc, onChangeFunc, inVisibleColumnsConfig
+}) => {
+    // debugger;
+    const tr = document.createElement("tr");
+
+    if (inShowSerial) tr.appendChild(getSerialColumn({ inSerialClass }));
+
+    insertRowCells({
+        keys, tr, options, inDefaultRow, inTdClass,
+        inShowDataList, onChangeFunc, inVisibleColumnsConfig
+    });
+
+    if (inShowSave) tr.appendChild(appendFooterSaveCell({ inOnSaveFunc }));
+
+    return tr;
+};
+
+const getSerialColumn = ({ inSerialClass }) => {
+    const thIndex = document.createElement("td");
+    thIndex.className = inSerialClass;
+
+    return thIndex
+};
+
+export { startFunc };