tailwind-table-dom 1.1.6 → 1.2.8

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

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

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

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

package/bin/table/v2/commands/table/template/v8/BuildTableVersions/V4/BuildFooterVersions/ForCreate/V4/CreateFooterRow/CreateFooterInput/v2/AttachKeyDownEvent/v2/ExecuteKeyDownType/v1/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/v8/BuildTableVersions/V4/BuildFooterVersions/ForCreate/V4/CreateFooterRow/CreateFooterInput/v2/AttachKeyDownEvent/v2/ExecuteKeyDownType/v1/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/v8/BuildTableVersions/V4/BuildFooterVersions/ForCreate/V4/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;