tailwind-table-dom 3.11.2 → 3.12.1

package/bin/table/v3/commands/table/template/v12/BuildTableVersions/V4/BuildFooterVersions/ForCreate/V5/CreateFooterRow/CreateFooterInput/v2/AttachKeyDownEvent/v2/ExecuteKeyDownType/v1/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/v3/commands/table/template/v12/BuildTableVersions/V4/BuildFooterVersions/ForCreate/V5/CreateFooterRow/CreateFooterInput/v2/AttachKeyDownEvent/v2/ExecuteKeyDownType/v2/Amount.js

@@ -0,0 +1,41 @@
+import showCalcMessage from "./showCalcMessage.js";
+
+const amountFunc = ({
+    currentInput
+}) => {
+    const closestTr =
+        currentInput.closest("tr");
+
+    const qty = Number(
+        closestTr.querySelector('[name="Qty"]').value
+    );
+
+    const amount = Number(
+        closestTr.querySelector('[name="Amount"]').value
+    );
+
+    const rateIncValue =
+        qty ? amount / qty : 0;
+
+    const rateIncControl = closestTr.querySelector('[name="RateInc"]');
+
+    rateIncControl.value = rateIncValue;
+
+    // Create a synthetic Enter key event
+    const enterEvent = new KeyboardEvent("keydown", {
+        key: "Enter",
+        code: "Enter",
+        bubbles: true,
+        cancelable: true
+    });
+
+    // Programmatically fire it on the second input
+    rateIncControl.dispatchEvent(enterEvent);
+
+    showCalcMessage({
+        input: currentInput,
+        message: `RateInc change : ${rateIncValue}`
+    });
+};
+
+export default amountFunc;

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

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

package/bin/table/v3/commands/table/template/v12/BuildTableVersions/V4/BuildFooterVersions/ForCreate/V5/CreateFooterRow/CreateFooterInput/v2/AttachKeyDownEvent/v2/ExecuteKeyDownType/v2/rate.js

@@ -0,0 +1,21 @@
+import showCalcMessage from "./showCalcMessage.js";
+
+const rateFunc = ({
+    currentInput, inDefaultRow
+}) => {
+    const closestTr =
+        currentInput.closest("tr");
+
+    const rate = currentInput.value;
+
+    const rateInclusiveValue = rate * (1 + (inDefaultRow.TaxPer / 100));
+
+    closestTr.querySelector('[name="RateInc"]').value = rateInclusiveValue.toFixed(2);
+
+    showCalcMessage({
+        input: currentInput,
+        message: `rateInc change : ${rateInclusiveValue}`
+    });
+};
+
+export default rateFunc;

package/bin/table/v3/commands/table/template/v12/BuildTableVersions/V4/BuildFooterVersions/ForCreate/V5/CreateFooterRow/CreateFooterInput/v2/AttachKeyDownEvent/v2/ExecuteKeyDownType/v2/rateInclusive.js

@@ -0,0 +1,21 @@
+import showCalcMessage from "./showCalcMessage.js";
+
+const rateInclusiveFunc = ({
+    currentInput, inDefaultRow
+}) => {
+    const closestTr =
+        currentInput.closest("tr");
+
+    const rateInclusiveValue = currentInput.value;
+
+    const rate = rateInclusiveValue / (1 + (inDefaultRow.TaxPer / 100));
+
+    closestTr.querySelector('[name="Rate"]').value = rate.toFixed(2);
+
+    showCalcMessage({
+        input: currentInput,
+        message: `rate change : ${rate}`
+    });
+};
+
+export default rateInclusiveFunc;

package/bin/table/v3/commands/table/template/v12/BuildTableVersions/V4/BuildFooterVersions/ForCreate/V5/CreateFooterRow/CreateFooterInput/v2/AttachKeyDownEvent/v2/ExecuteKeyDownType/v2/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/v3/commands/table/template/v12/BuildTableVersions/V4/BuildFooterVersions/ForCreate/V5/CreateFooterRow/CreateFooterInput/v2/AttachKeyDownEvent/v2/ExecuteKeyDownType/v2/start.js

@@ -0,0 +1,34 @@
+import Amount from "./Amount.js";
+import qty from "./qty.js";
+import rateInclusive from "./rateInclusive.js";
+import rate from "./rate.js";
+
+const executeKeyDownType = ({
+    currentInput,
+    inOnKeyDownType,
+    inDefaultRow
+}) => {
+    switch (inOnKeyDownType) {
+        case "Amount":
+            Amount({ currentInput });
+            break;
+
+        case "Qty":
+            qty({ currentInput });
+            break;
+
+        case "RateInc":
+            rateInclusive({ currentInput, inDefaultRow });
+
+            break;
+
+        case "Rate":
+            rate({ currentInput, inDefaultRow });
+
+            break;
+        default:
+            break;
+    };
+};
+
+export default executeKeyDownType;

package/bin/table/v3/commands/table/template/v12/BuildTableVersions/V4/BuildFooterVersions/ForCreate/V5/CreateFooterRow/CreateFooterInput/v2/AttachKeyDownEvent/v2/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/v3/commands/table/template/v12/BuildTableVersions/V4/BuildFooterVersions/ForCreate/V5/CreateFooterRow/CreateFooterInput/v2/AttachKeyDownEvent/v2/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/v3/commands/table/template/v12/BuildTableVersions/V4/BuildFooterVersions/ForCreate/V5/CreateFooterRow/CreateFooterInput/v2/AttachKeyDownEvent/v2/start.js

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

package/bin/table/v3/commands/table/template/v12/BuildTableVersions/V4/BuildFooterVersions/ForCreate/V5/CreateFooterRow/CreateFooterInput/v2/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/v3/commands/table/template/v12/BuildTableVersions/V4/BuildFooterVersions/ForCreate/V5/CreateFooterRow/CreateFooterInput/v2/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/v3/commands/table/template/v12/BuildTableVersions/V4/BuildFooterVersions/ForCreate/V5/CreateFooterRow/CreateFooterInput/v2/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/v3/commands/table/template/v12/BuildTableVersions/V4/BuildFooterVersions/ForCreate/V5/CreateFooterRow/CreateFooterInput/v2/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/v3/commands/table/template/v12/BuildTableVersions/V4/BuildFooterVersions/ForCreate/V5/CreateFooterRow/CreateFooterInput/v2/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/v3/commands/table/template/v12/BuildTableVersions/V4/BuildFooterVersions/ForCreate/V5/CreateFooterRow/CreateFooterInput/v2/start.js

@@ -0,0 +1,53 @@
+import createInput from "./createInput.js";
+import applyDataList from "./applyDataList.js";
+import applyDefaultValue from "./applyDefaultValue.js";
+import attachChangeEvent from "./attachChangeEvent.js";
+import attachKeyDownEvent from "./AttachKeyDownEvent/v2/start.js";
+
+const createFooterInput = (args) => {
+    const {
+        key,
+        onChangeFunc,
+        showDataList,
+        inColumnsConfig,
+        inDefaultValue,
+        inOnChangeType,
+        inOnKeyDown,
+        inOnKeyDownType,
+        inDefaultRow
+    } = 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,
+        inDefaultRow
+    });
+
+    return input;
+};
+
+export default createFooterInput;

package/bin/table/v3/commands/table/template/v12/BuildTableVersions/V4/BuildFooterVersions/ForCreate/V5/CreateFooterRow/CreateHeaderCell/assemble.js

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

package/bin/table/v3/commands/table/template/v12/BuildTableVersions/V4/BuildFooterVersions/ForCreate/V5/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/v3/commands/table/template/v12/BuildTableVersions/V4/BuildFooterVersions/ForCreate/V5/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/v3/commands/table/template/v12/BuildTableVersions/V4/BuildFooterVersions/ForCreate/V5/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/v3/commands/table/template/v12/BuildTableVersions/V4/BuildFooterVersions/ForCreate/V5/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/v3/commands/table/template/v12/BuildTableVersions/V4/BuildFooterVersions/ForCreate/V5/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/v3/commands/table/template/v12/BuildTableVersions/V4/BuildFooterVersions/ForCreate/V5/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/v3/commands/table/template/v12/BuildTableVersions/V4/BuildFooterVersions/ForCreate/V5/CreateFooterRow/createFooterCell.js

@@ -0,0 +1,31 @@
+import createFooterInput from "./CreateFooterInput/v2/start.js";
+
+const createFooterCell = ({ key, onChangeFunc, showDataList, inColumnsConfig,
+    inDefaultValue, inTdClass, inAllowOnChange = false, inOnChangeType,
+    inOnKeyDown, inOnKeyDownType, inDefaultRow }) => {
+
+    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,
+        inDefaultRow
+    });
+
+    const div = document.createElement("div");
+    div.className = "calc-message";
+
+    td.appendChild(input);
+    td.appendChild(div);
+
+    return td;
+};
+
+export { createFooterCell };