tailwind-table-dom 1.3.11 → 3.12.1

package/bin/table/v3/commands/table/template/v12/BuildVerticalWithVersions/V2/BuildForm/V5/Create/CreateInputRow/createInputRow.js

@@ -0,0 +1,50 @@
+// 📁 createInputRow.js
+
+import { createLabel } from "./createLabel.js";
+import { createInput } from "./createInput.js";
+import { resolveValue } from "./resolveValue.js";
+import { createRowContainer } from "./createRowContainer.js";
+import { attachToInputs } from "./attachToInputs.js";
+import { assembleRow } from "./assembleRow.js";
+
+const createInputRow = ({
+    inCol,
+    inDefaultRow,
+    inInputs,
+    inInputClass,
+    inRowClass,
+    inLabelClass,
+    isDate,
+    defaultToday,
+    isReadonly,
+    autoFocus,
+    isSearch,
+    onChangeFunc
+}) => {
+    const col = inCol.columnName;
+
+    const row = createRowContainer({ rowClass: inRowClass });
+
+    const value = resolveValue({ col, defaultRow: inDefaultRow });
+
+    const label = createLabel({ col, labelClass: inLabelClass });
+
+    const input = createInput({
+        col,
+        inputClass: inInputClass,
+        value,
+        inShowDataList: inCol.tableFooterDataListShow,
+        isDate,
+        defaultToday,
+        isReadonly,
+        autoFocus,
+        isSearch,
+        onChangeFunc
+    });
+
+    attachToInputs({ inputs: inInputs, col, input });
+
+    return assembleRow({ row, label, input });
+};
+
+export { createInputRow };

package/bin/table/v3/commands/table/template/v12/BuildVerticalWithVersions/V2/BuildForm/V5/Create/CreateInputRow/createLabel.js

@@ -0,0 +1,8 @@
+const createLabel = ({ col, labelClass }) => {
+    const label = document.createElement('label');
+    label.textContent = col;
+    label.className = labelClass;
+    return label;
+};
+
+export { createLabel };

package/bin/table/v3/commands/table/template/v12/BuildVerticalWithVersions/V2/BuildForm/V5/Create/CreateInputRow/createRowContainer.js

@@ -0,0 +1,7 @@
+const createRowContainer = ({ rowClass }) => {
+    const row = document.createElement('div');
+    row.className = rowClass;
+    return row;
+};
+
+export { createRowContainer };

package/bin/table/v3/commands/table/template/v12/BuildVerticalWithVersions/V2/BuildForm/V5/Create/CreateInputRow/resolveValue.js

@@ -0,0 +1,5 @@
+const resolveValue = ({ col, defaultRow }) => {
+    return defaultRow?.[col];
+};
+
+export { resolveValue };

package/bin/table/v3/commands/table/template/v12/BuildVerticalWithVersions/V2/BuildForm/V5/Create/createInputRow.js

@@ -0,0 +1,76 @@
+// 📁 createInputRow.js
+
+const createLabel = ({ col, labelClass }) => {
+    const label = document.createElement('label');
+    label.textContent = col;
+    label.className = labelClass;
+    return label;
+};
+
+const createInput = ({ col, inputClass, value, inShowDataList }) => {
+    const input = document.createElement('input');
+    input.className = inputClass;
+    input.name = col;
+
+    if (value !== undefined) {
+        input.dataset.defaultValue = value ?? "";
+    };
+
+    input.value = value ?? "";
+
+    if (inShowDataList) {
+        input.setAttribute("list", `${col}List`);
+    };
+
+    return input;
+};
+
+const resolveValue = ({ col, defaultRow }) => {
+    return defaultRow?.[col];
+};
+
+const createRowContainer = ({ rowClass }) => {
+    const row = document.createElement('div');
+    row.className = rowClass;
+    return row;
+};
+
+const attachToInputs = ({ inputs, col, input }) => {
+    inputs[col] = input;
+};
+
+const assembleRow = ({ row, label, input }) => {
+    row.appendChild(label);
+    row.appendChild(input);
+    return row;
+};
+
+const createInputRow = ({
+    inCol,
+    inDefaultRow,
+    inInputs,
+    inInputClass,
+    inRowClass,
+    inLabelClass
+}) => {
+    const col = inCol.columnName;
+
+    const row = createRowContainer({ rowClass: inRowClass });
+
+    const value = resolveValue({ col, defaultRow: inDefaultRow });
+
+    const label = createLabel({ col, labelClass: inLabelClass });
+
+    const input = createInput({
+        col,
+        inputClass: inInputClass,
+        value,
+        inShowDataList: inCol.tableFooterDataListShow
+    });
+
+    attachToInputs({ inputs: inInputs, col, input });
+
+    return assembleRow({ row, label, input });
+};
+
+export { createInputRow };

package/bin/table/v3/commands/table/template/v12/BuildVerticalWithVersions/V2/BuildForm/V5/appendFieldset.js

@@ -0,0 +1,9 @@
+const appendFieldset = ({
+    inForm,
+    inFieldset
+}) => {
+
+    inForm.appendChild(inFieldset);
+};
+
+export { appendFieldset };

package/bin/table/v3/commands/table/template/v12/BuildVerticalWithVersions/V2/BuildForm/V5/clearFormInputs.js

@@ -0,0 +1,13 @@
+const clearFormInputs = ({ inInputs }) => {
+    const inputs = inInputs;
+
+    Object.values(inputs).forEach(input => {
+        input.value = "";
+
+        if ("defaultValue" in input.dataset) {
+            input.value = input.dataset.defaultValue;
+        };
+    });
+};
+
+export { clearFormInputs };

package/bin/table/v3/commands/table/template/v12/BuildVerticalWithVersions/V2/BuildForm/V5/createFieldset.js

@@ -0,0 +1,14 @@
+const createFieldset = ({
+    inFormClass,
+    inIsDisabled
+}) => {
+
+    const localFieldset = document.createElement("fieldset");
+
+    localFieldset.className = inFormClass;
+    localFieldset.disabled = inIsDisabled;
+
+    return localFieldset;
+};
+
+export { createFieldset };

package/bin/table/v3/commands/table/template/v12/BuildVerticalWithVersions/V2/BuildForm/V5/createForm.js

@@ -0,0 +1,53 @@
+// createForm.js
+
+import { createFormElement } from "./createFormElement.js";
+import { createFieldset } from "./createFieldset.js";
+import { appendInputRows } from "./Append/appendInputRows.js";
+import { appendSaveButton } from "./Append/appendSaveButton.js";
+import { appendFieldset } from "./appendFieldset.js";
+
+const createForm = ({
+    showSaveButton,
+    inDefaultRow,
+    onSubmit,
+    uiClasses,
+    inIsDisabled,
+    inVisibleColumnsConfig,
+    inGetDataLists
+}) => {
+    debugger
+    const localForm = createFormElement();
+
+    const localFieldset = createFieldset({
+        inFormClass: uiClasses.formClass,
+        inIsDisabled
+    });
+
+    const localInputs = {};
+
+    appendFieldset({
+        inForm: localForm,
+        inFieldset: localFieldset
+    });
+
+    appendInputRows({
+        inFieldset: localFieldset,
+        inVisibleColumnsConfig,
+        inDefaultRow,
+        inInputs: localInputs,
+        inUiClasses: uiClasses,
+        inGetDataLists
+    });
+
+    appendSaveButton({
+        inFieldset: localFieldset,
+        inShowSaveButton: showSaveButton,
+        inButtonClass: uiClasses.buttonClass,
+        inInputs: localInputs,
+        inOnSubmit: onSubmit
+    });
+
+    return localForm;
+};
+
+export { createForm };

package/bin/table/v3/commands/table/template/v12/BuildVerticalWithVersions/V2/BuildForm/V5/createFormElement.js

@@ -0,0 +1,9 @@
+const createFormElement = () => {
+    const localForm = document.createElement("form");
+
+    localForm.className = "verticalForm";
+
+    return localForm;
+};
+
+export { createFormElement };

package/bin/table/v3/commands/table/template/v12/BuildVerticalWithVersions/V2/BuildForm/V5/focusFirstInput.js

@@ -0,0 +1,10 @@
+const focusFirstInput = ({ inInputs }) => {
+    const inputs = inInputs;
+    const firstKey = Object.keys(inputs)[0];
+
+    if (firstKey) {
+        inputs[firstKey].focus();
+    }
+};
+
+export { focusFirstInput };

package/bin/table/v3/commands/table/template/v12/BuildVerticalWithVersions/V2/BuildForm/V6/Append/CreateHandleOnChange/start.js

@@ -0,0 +1,56 @@
+const startFunc = ({ inGetDataLists }) => {
+    return (inEvent) => {
+        const localFieldSet = getFieldSet(inEvent);
+        const localFindRow = getFindRow({ inEvent, inGetDataLists });
+
+        if (localFindRow === undefined) return;
+
+        updateInputs({
+            inFieldSet: localFieldSet,
+            inFindRow: localFindRow
+        });
+    };
+};
+
+const getFieldSet = (inEvent) => {
+    return inEvent.currentTarget.closest("fieldset.verticalForm");
+};
+
+const getFindRow = ({ inEvent, inGetDataLists }) => {
+    const localCurrentTarget = inEvent.currentTarget;
+
+    return findRow({
+        inDataListSource: localCurrentTarget.dataset.dataListSource,
+        inValueToFind: localCurrentTarget.value,
+        inGetDataLists
+    });
+};
+
+const updateInputs = ({ inFieldSet, inFindRow }) => {
+    Object.entries(inFindRow).forEach(([key, value]) => {
+        const localInput = inFieldSet.querySelector(`[name="${key}"]`);
+
+        if (localInput) localInput.value = value;
+    });
+};
+
+const findRow = ({
+    inDataListSource,
+    inValueToFind,
+    inGetDataLists
+}) => {
+    const localToFindDataListKey =
+        inDataListSource.split(".")[0];
+
+    const localToFindColumn =
+        inDataListSource.split(".")[1];
+
+    const localDataListItems =
+        inGetDataLists(localToFindDataListKey);
+
+    return localDataListItems.find((element) => {
+        return element[localToFindColumn] === inValueToFind;
+    });
+};
+
+export { startFunc };

package/bin/table/v3/commands/table/template/v12/BuildVerticalWithVersions/V2/BuildForm/V6/Append/appendInputRows.js

@@ -0,0 +1,71 @@
+import { createInputRow } from "../Create/CreateInputRow/createInputRow.js";
+import { startFunc as createHandleOnChange } from "./CreateHandleOnChange/start.js";
+
+const appendInputRows = ({
+    inFieldset,
+    inVisibleColumnsConfig,
+    inDefaultRow,
+    inInputs,
+    inUiClasses,
+    inGetDataLists
+}) => {
+    // debugger
+    const localHandleOnChange = createHandleOnChange({
+        inGetDataLists,
+        inColumnsConfig: inVisibleColumnsConfig
+    });
+
+    // debugger;
+    inVisibleColumnsConfig.forEach(localColumn => {
+        appendInputRow({
+            inFieldset,
+            inColumn: localColumn,
+            inDefaultRow,
+            inInputs,
+            inUiClasses,
+            isDate: localColumn.isDate,
+            defaultToday: localColumn.defaultToday,
+            isReadonly: localColumn.isReadonly,
+            autoFocus: localColumn.autoFocus,
+            isSearch: localColumn.isSearch,
+            onChangeFunc: localHandleOnChange,
+            inDataListSource: localColumn.dataListSource
+        });
+    });
+};
+
+const appendInputRow = ({
+    inFieldset,
+    inColumn,
+    inDefaultRow,
+    inInputs,
+    inUiClasses,
+    isDate,
+    defaultToday,
+    isReadonly,
+    autoFocus,
+    isSearch,
+    onChangeFunc,
+    inDataListSource
+}) => {
+
+    const localRow = createInputRow({
+        inCol: inColumn,
+        inDefaultRow,
+        inInputs,
+        inInputClass: inUiClasses.inputClass,
+        inRowClass: inUiClasses.rowClass,
+        inLabelClass: inUiClasses.labelClass,
+        isDate,
+        defaultToday,
+        isReadonly,
+        autoFocus,
+        isSearch,
+        onChangeFunc,
+        inDataListSource
+    });
+
+    inFieldset.appendChild(localRow);
+};
+
+export { appendInputRows };

package/bin/table/v3/commands/table/template/v12/BuildVerticalWithVersions/V2/BuildForm/V6/Append/appendSaveButton.js

@@ -0,0 +1,22 @@
+import { createButton } from "../Create/CreateButton/createButton.js";
+
+const appendSaveButton = ({
+    inFieldset,
+    inShowSaveButton,
+    inButtonClass,
+    inInputs,
+    inOnSubmit
+}) => {
+
+    if (inShowSaveButton === false) return;
+
+    const localButton = createButton({
+        inButtonClass,
+        inInputs,
+        inOnSubmit
+    });
+
+    inFieldset.appendChild(localButton);
+};
+
+export { appendSaveButton };

package/bin/table/v3/commands/table/template/v12/BuildVerticalWithVersions/V2/BuildForm/V6/Create/CreateButton/collectFormData.js

@@ -0,0 +1,13 @@
+const collectFormData = ({ inInputs }) => {
+    const inputs = inInputs;
+
+    const newItem = {};
+
+    Object.keys(inputs).forEach(key => {
+        newItem[key] = inputs[key].value;
+    });
+
+    return newItem;
+};
+
+export { collectFormData };

package/bin/table/v3/commands/table/template/v12/BuildVerticalWithVersions/V2/BuildForm/V6/Create/CreateButton/createButton.js

@@ -0,0 +1,31 @@
+import { collectFormData } from "./collectFormData.js";
+import { clearFormInputs } from "../../clearFormInputs.js";
+import { focusFirstInput } from "../../focusFirstInput.js";
+
+const createButton = ({ inButtonClass, inInputs, inOnSubmit }) => {
+    const buttonClass = inButtonClass;
+    const inputs = inInputs;
+    const onSubmit = inOnSubmit;
+
+    const button = document.createElement('button');
+    button.textContent = 'Save';
+    button.className = buttonClass;
+
+    button.addEventListener('click', async (event) => {
+        event.preventDefault(); // 🔥 THIS IS THE KEY
+
+        const newItem = collectFormData({ inInputs: inputs });
+        // debugger
+        // const fromSubmit = false;
+        const fromSubmit = await onSubmit(newItem);
+
+        if (fromSubmit) {
+            clearFormInputs({ inInputs });
+            focusFirstInput({ inInputs });
+        };
+    });
+
+    return button;
+};
+
+export { createButton };

package/bin/table/v3/commands/table/template/v12/BuildVerticalWithVersions/V2/BuildForm/V6/Create/CreateInputRow/assembleRow.js

@@ -0,0 +1,7 @@
+const assembleRow = ({ row, label, input }) => {
+    row.appendChild(label);
+    row.appendChild(input);
+    return row;
+};
+
+export { assembleRow };

package/bin/table/v3/commands/table/template/v12/BuildVerticalWithVersions/V2/BuildForm/V6/Create/CreateInputRow/attachToInputs.js

@@ -0,0 +1,5 @@
+const attachToInputs = ({ inputs, col, input }) => {
+    inputs[col] = input;
+};
+
+export { attachToInputs };

package/bin/table/v3/commands/table/template/v12/BuildVerticalWithVersions/V2/BuildForm/V6/Create/CreateInputRow/createInput.js

@@ -0,0 +1,62 @@
+// createInput.js
+
+const createInput = ({
+    col,
+    inputClass,
+    value,
+    inShowDataList,
+    isDate,
+    defaultToday,
+    isReadonly,
+    autoFocus,
+    isSearch,
+    onChangeFunc,
+    inDataListSource
+}) => {
+
+    const input = document.createElement("input");
+
+    input.className = inputClass;
+    input.name = col;
+
+    if (value !== undefined) {
+        input.dataset.defaultValue = value ?? "";
+    };
+
+    input.value = value ?? "";
+
+    if (inShowDataList) {
+        input.setAttribute("list", `${col}List`);
+        input.dataset.dataListSource = inDataListSource;
+
+        // debugger
+        input.addEventListener(
+            "change",
+            onChangeFunc
+        );
+    };
+
+    if (isDate) {
+        input.setAttribute("type", "date");
+    };
+
+    if (isDate && defaultToday) {
+        input.valueAsDate = new Date();
+    };
+
+    if (isReadonly) {
+        input.readOnly = true;
+    };
+
+    if (autoFocus) {
+        input.autofocus = true;
+    };
+
+    if (isSearch) {
+        input.setAttribute("type", "search");
+    };
+
+    return input;
+};
+
+export { createInput };

package/bin/table/v3/commands/table/template/v12/BuildVerticalWithVersions/V2/BuildForm/V6/Create/CreateInputRow/createInputRow.js

@@ -0,0 +1,52 @@
+// 📁 createInputRow.js
+
+import { createLabel } from "./createLabel.js";
+import { createInput } from "./createInput.js";
+import { resolveValue } from "./resolveValue.js";
+import { createRowContainer } from "./createRowContainer.js";
+import { attachToInputs } from "./attachToInputs.js";
+import { assembleRow } from "./assembleRow.js";
+
+const createInputRow = ({
+    inCol,
+    inDefaultRow,
+    inInputs,
+    inInputClass,
+    inRowClass,
+    inLabelClass,
+    isDate,
+    defaultToday,
+    isReadonly,
+    autoFocus,
+    isSearch,
+    onChangeFunc,
+    inDataListSource
+}) => {
+    const col = inCol.columnName;
+
+    const row = createRowContainer({ rowClass: inRowClass });
+
+    const value = resolveValue({ col, defaultRow: inDefaultRow });
+
+    const label = createLabel({ col, labelClass: inLabelClass });
+
+    const input = createInput({
+        col,
+        inputClass: inInputClass,
+        value,
+        inShowDataList: inCol.tableFooterDataListShow,
+        isDate,
+        defaultToday,
+        isReadonly,
+        autoFocus,
+        isSearch,
+        onChangeFunc,
+        inDataListSource
+    });
+
+    attachToInputs({ inputs: inInputs, col, input });
+
+    return assembleRow({ row, label, input });
+};
+
+export { createInputRow };

package/bin/table/v3/commands/table/template/v12/BuildVerticalWithVersions/V2/BuildForm/V6/Create/CreateInputRow/createLabel.js

@@ -0,0 +1,8 @@
+const createLabel = ({ col, labelClass }) => {
+    const label = document.createElement('label');
+    label.textContent = col;
+    label.className = labelClass;
+    return label;
+};
+
+export { createLabel };

package/bin/table/v3/commands/table/template/v12/BuildVerticalWithVersions/V2/BuildForm/V6/Create/CreateInputRow/createRowContainer.js

@@ -0,0 +1,7 @@
+const createRowContainer = ({ rowClass }) => {
+    const row = document.createElement('div');
+    row.className = rowClass;
+    return row;
+};
+
+export { createRowContainer };

package/bin/table/v3/commands/table/template/v12/BuildVerticalWithVersions/V2/BuildForm/V6/Create/CreateInputRow/resolveValue.js

@@ -0,0 +1,5 @@
+const resolveValue = ({ col, defaultRow }) => {
+    return defaultRow?.[col];
+};
+
+export { resolveValue };