tailwind-table-dom 1.1.6 → 1.3.11

package/bin/table/v3/commands/table/template/v9/BuildTableOnly/BuildForm/V3/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/v9/BuildTableOnly/BuildForm/V3/createButton.js

@@ -0,0 +1,30 @@
+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 });
+
+        await onSubmit(newItem);
+
+        clearFormInputs({ inInputs: inputs });
+
+        focusFirstInput({ inInputs: inputs });
+    });
+
+    return button;
+};
+
+export { createButton };

package/bin/table/v3/commands/table/template/v9/BuildTableOnly/BuildForm/V3/createForm.js

@@ -0,0 +1,52 @@
+import { createInputRow } from "./createInputRow.js";
+import { createButton } from "./createButton.js";
+
+const createForm = ({ columns, inDataStore, showSaveButton,
+    inDefaultRow, onSubmit, uiClasses, inIsDisabled, inVisibleColumnsConfig }) => {
+    debugger;
+    const defaultRow = inDefaultRow;
+
+    const formClass = uiClasses.formClass;
+    const inputClass = uiClasses.inputClass;
+    const buttonClass = uiClasses.buttonClass;
+    const rowClass = uiClasses.rowClass;
+    const labelClass = uiClasses.labelClass;
+    // debugger;
+    const form = document.createElement('form');
+    form.className = "verticalForm";
+
+    const fieldset = document.createElement('fieldset');
+    fieldset.className = formClass;
+
+    fieldset.disabled = inIsDisabled; // when needed
+
+    form.appendChild(fieldset);
+    const inputs = {};
+
+    inVisibleColumnsConfig.forEach(col => {
+        const row = createInputRow({
+            inCol: col,
+            inDefaultRow: defaultRow,
+            inInputs: inputs,
+            inInputClass: inputClass,
+            inRowClass: rowClass,
+            inLabelClass: labelClass,
+        });
+
+        fieldset.appendChild(row);
+    });
+
+    if (showSaveButton) {
+        const button = createButton({
+            inButtonClass: buttonClass,
+            inInputs: inputs,
+            inOnSubmit: onSubmit
+        });
+
+        fieldset.appendChild(button);
+    };
+
+    return form;
+};
+
+export { createForm };

package/bin/table/v3/commands/table/template/v9/BuildTableOnly/BuildForm/V3/createInputRow.js

@@ -0,0 +1,71 @@
+// 📁 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;
+    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/v9/BuildTableOnly/BuildForm/V3/focusFirstInput.js

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

package/bin/table/v3/commands/table/template/v9/BuildTableOnly/BuildForm/applyProjection.js

@@ -0,0 +1,15 @@
+const applyProjection = ({ row, projection }) => {
+    if (!row || !projection) return row;
+
+    const updatedRow = { ...row };
+
+    Object.keys(projection).forEach((key) => {
+        if (key in updatedRow) {
+            updatedRow[key] = projection[key];
+        }
+    });
+
+    return updatedRow;
+};
+
+export { applyProjection };

package/bin/table/v3/commands/table/template/v9/BuildTableOnly/BuildForm/start.js

@@ -0,0 +1,86 @@
+import { createForm } from "./V3/createForm.js";
+import { afterMutation } from "../afterMutation.js";
+// import { applyProjection } from "./applyProjection.js";
+
+const buildForm = ({
+    inContainerEl,
+    inDataStore,
+    inDom,
+    inServices,
+    inOptions,
+    inEndPoints,
+    inColumnsConfig,
+    inShowFooter,
+    inData,
+    inVisibleColumns,
+    inVisibleColumnsConfig,
+    onDelete,
+    inShowActions,
+    inShowSerial,
+    isBuildDataLists,
+    inDefaultRow,
+    inFormClass,
+    inButtonClass,
+    uiClasses,
+    inIsDisabled,
+    showSaveButton,
+    inFindData,
+    inShowTable,
+    incallbacks
+}) => {
+    const handleSave = async (newItem) => {
+        debugger;
+        const res = await inServices.actions.vertical.save({
+            inEndPoint: inEndPoints.create,
+            payload: newItem
+        });
+        
+        if (res.ok) {
+            if (incallbacks?.vertical?.onSuccess) {
+                incallbacks?.vertical?.onSuccess(res);
+                return; // 🚫 stop library flow
+            };
+        };
+
+        // afterMutation({
+        //     inServices,
+        //     inEndPoints,
+        //     inDataStore,
+        //     inContainerEl,
+        //     inDom,
+        //     inOptions,
+        //     inVisibleColumns,
+        //     onDelete,
+        //     isBuildDataLists,
+        //     inShowActions, inShowSerial,
+        //     inDefaultRow,
+        //     inShowTable
+        // });
+    };
+
+    const form = createForm({
+        columns: inVisibleColumns,
+        inVisibleColumnsConfig,
+        inDataStore,
+        inDefaultRow,
+        onSubmit: handleSave,
+        uiClasses,
+        inIsDisabled,
+        showSaveButton
+    });
+
+    inContainerEl.prepend(form);
+    // debugger;
+    applyProjectionToTableRow({ tr: form, projection: inFindData })
+};
+
+const applyProjectionToTableRow = ({ tr, projection }) => {
+    Object.entries(projection).forEach(([key, value]) => {
+        const cell = tr.querySelector(`[name="${key}"]`);
+        if (cell) {
+            cell.value = value;
+        }
+    });
+};
+
+export { buildForm };

package/bin/table/v3/commands/table/template/v9/BuildTableOnly/BuildTableVersions/V1/BuildBodyVersions/V1/buildBody.js

@@ -0,0 +1,16 @@
+import { buildRow } from "./buildRow.js";
+
+const buildBody = ({ inDataStore, inContainerEl, inDom, options }) => {
+    const tableBody = inDom.getTableBody(inContainerEl);
+    const data = inDataStore.getData();
+    const columns = inDataStore.getColumns();
+
+    tableBody.innerHTML = "";
+
+    data.forEach((item, index) => {
+        const row = buildRow({ item, index, columns, options });
+        tableBody.appendChild(row);
+    });
+};
+
+export { buildBody };

package/bin/table/v3/commands/table/template/v9/BuildTableOnly/BuildTableVersions/V1/BuildBodyVersions/V1/buildRow.js

@@ -0,0 +1,48 @@
+import { createRow } from "./createRow.js";
+import { createIndexCell } from "./createIndexCell.js";
+import { createDataCell } from "./createDataCell.js";
+import { createOptionsCell } from "./createOptionsCell.js";
+
+const buildRow = ({ item, index, inVisibleColumns, options, searchValue }) => {
+    const tr = createRow({
+        inClassName: "border-t hover:bg-blue-100 odd:bg-gray-100",
+        inPk: item?.pk
+    });
+
+    appendSerialCell(tr, options?.showSerial, index);
+
+    appendDataCells({ tr, item, columns: inVisibleColumns, searchValue });
+    appendActionCell({ tr, item, index, options, searchValue });
+
+    return tr;
+};
+
+const appendSerialCell = (tr, showSerial, index) => {
+    if (showSerial) {
+        tr.appendChild(createIndexCell(index));
+    };
+};
+
+const appendDataCells = ({ tr, item, columns, searchValue }) => {
+    columns.forEach((key) => {
+        tr.appendChild(createDataCell({
+            value: item[key],
+            searchValue
+        }));
+    });
+};
+
+const appendActionCell = ({ tr, item, index, options, searchValue }) => {
+    if (options?.showActions) {
+        tr.appendChild(
+            createOptionsCell({
+                item,
+                index,
+                onEdit: options.onEdit,
+                onDelete: options.onDelete
+            })
+        );
+    };
+};
+
+export { buildRow };

package/bin/table/v3/commands/table/template/v9/BuildTableOnly/BuildTableVersions/V1/BuildBodyVersions/V1/createDataCell.js

@@ -0,0 +1,18 @@
+import { highlight } from "./highlight.js";
+
+const createDataCell = ({ value, searchValue }) => {
+    const td = document.createElement("td");
+    // debugger;
+    td.className = "px-4 py-2 border";
+    // td.textContent = (value ?? "").toString();
+
+    if (searchValue === "") {
+        td.innerHTML = (value ?? "").toString();
+    } else {
+        td.innerHTML = highlight({ text: (value ?? "").toString(), searchValue });
+    };
+
+    return td;
+};
+
+export { createDataCell };

package/bin/table/v3/commands/table/template/v9/BuildTableOnly/BuildTableVersions/V1/BuildBodyVersions/V1/createIndexCell.js

@@ -0,0 +1,8 @@
+const createIndexCell = (index) => {
+    const td = document.createElement("td");
+    td.className = "px-4 py-2 border text-right";
+    td.textContent = index + 1;
+    return td;
+};
+
+export { createIndexCell };

package/bin/table/v3/commands/table/template/v9/BuildTableOnly/BuildTableVersions/V1/BuildBodyVersions/V1/createOptionsCell.js

@@ -0,0 +1,21 @@
+const createOptionsCell = ({ item, index, onEdit, onDelete }) => {
+    const td = document.createElement("td");
+    td.className = "px-4 py-2 border flex gap-2";
+
+    const editBtn = document.createElement("button");
+    editBtn.textContent = "Edit";
+    editBtn.className = "px-2 py-1 bg-yellow-400 text-white rounded";
+    editBtn.onclick = () => onEdit?.({ item, index });
+
+    const deleteBtn = document.createElement("button");
+    deleteBtn.textContent = "Delete";
+    deleteBtn.className = "px-2 py-1 bg-red-500 text-white rounded";
+    deleteBtn.onclick = () => onDelete?.({ item, index, presentPk: item.pk });
+
+    td.appendChild(editBtn);
+    td.appendChild(deleteBtn);
+
+    return td;
+};
+
+export { createOptionsCell };

package/bin/table/v3/commands/table/template/v9/BuildTableOnly/BuildTableVersions/V1/BuildBodyVersions/V1/createRow.js

@@ -0,0 +1,9 @@
+const createRow = ({ inPk, inClassName }) => {
+    const tr = document.createElement("tr");
+    tr.className = inClassName;
+    tr.dataset.pk = inPk;
+
+    return tr;
+};
+
+export { createRow };

package/bin/table/v3/commands/table/template/v9/BuildTableOnly/BuildTableVersions/V1/BuildBodyVersions/V1/highlight.js

@@ -0,0 +1,15 @@
+const highlight = ({ text = "", searchValue = "" }) => {
+    if (!searchValue) return text;
+
+    try {
+        const safeSearch = searchValue.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"); // escape regex
+        const regex = new RegExp(`(${safeSearch})`, "gi");
+        // return text.replace(regex, `<mark>$1</mark>`);
+        // return text.replace(regex, `<mark class="bg-yellow-300 px-1 rounded">$1</mark>`);
+        return text.replace(regex, `<mark class="bg-yellow-300">$1</mark>`);
+    } catch (e) {
+        return text; // fallback
+    }
+};
+
+export { highlight };

package/bin/table/v3/commands/table/template/v9/BuildTableOnly/BuildTableVersions/V1/BuildBodyVersions/V1/pureBuildBody.js

@@ -0,0 +1,15 @@
+import { buildRow } from "./buildRow.js";
+
+const pureBuildBody = ({ inData, inVisibleColumns, inContainerEl, inDom, options, searchValue = "" }) => {
+    const tableBody = inDom.getTableBody(inContainerEl);
+    const data = inData;
+    // debugger;
+    tableBody.innerHTML = "";
+
+    data.forEach((item, index) => {
+        const row = buildRow({ item, index, inVisibleColumns, options, searchValue });
+        tableBody.appendChild(row);
+    });
+};
+
+export { pureBuildBody };

package/bin/table/v3/commands/table/template/v9/BuildTableOnly/BuildTableVersions/V1/BuildBodyVersions/V1/start.js

@@ -0,0 +1,34 @@
+const buildBody = ({ inDataStore, inContainerEl, inDom }) => {
+    const containerEl = inContainerEl;
+
+    const dataToShow = inDataStore.getData();
+    const columns = inDataStore.getColumns();
+    const tableBody = inDom.getTableBody(containerEl);
+
+    tableBody.innerHTML = '';
+
+    dataToShow.forEach((item, i) => {
+        const tr = document.createElement('tr');
+        tr.className = 'border-t hover:bg-blue-100 odd:bg-gray-100';
+
+        const tdIndex = document.createElement('td');
+        tdIndex.className = 'px-4 py-2 border text-right';
+        tdIndex.textContent = i + 1;
+        tr.appendChild(tdIndex);
+
+        columns.forEach(k => {
+            const td = document.createElement('td');
+            td.className = 'px-4 py-2 border';
+
+            const value = (item[k] ?? '').toString();
+
+            td.textContent = value;
+
+            tr.appendChild(td);
+        });
+
+        tableBody.appendChild(tr);
+    });
+};
+
+export { buildBody };

package/bin/table/v3/commands/table/template/v9/BuildTableOnly/BuildTableVersions/V1/BuildFooterVersions/V1/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/v9/BuildTableOnly/BuildTableVersions/V1/BuildFooterVersions/V1/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/v9/BuildTableOnly/BuildTableVersions/V1/BuildFooterVersions/V1/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/v9/BuildTableOnly/BuildTableVersions/V1/BuildFooterVersions/V1/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/v9/BuildTableOnly/BuildTableVersions/V1/BuildFooterVersions/V1/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/v9/BuildTableOnly/BuildTableVersions/V1/BuildFooterVersions/V1/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/v9/BuildTableOnly/BuildTableVersions/V1/BuildFooterVersions/V1/CreateFooterRow/appendFooterSaveCell.js

@@ -0,0 +1,19 @@
+const appendFooterSaveCell = (options = {}) => {
+    // debugger
+    if (!options?.onSave) return;
+
+    const td = document.createElement("td");
+    td.className = "px-4 py-2 border";
+
+    const btn = document.createElement("button");
+    btn.textContent = "Save";
+    btn.className = "px-3 py-1 bg-green-500 text-white rounded";
+
+    btn.onclick = (e) => options?.onSave?.(e);
+
+    td.appendChild(btn);
+    // debugger
+    return td;
+};
+
+export { appendFooterSaveCell };

package/bin/table/v3/commands/table/template/v9/BuildTableOnly/BuildTableVersions/V1/BuildFooterVersions/V1/CreateFooterRow/createFooterCell.js

@@ -0,0 +1,15 @@
+// createFooterCell.js
+
+import { createFooterInput } from "./createFooterInput.js";
+
+const createFooterCell = ({ key, onChangeFunc, showDataList, inColumnsConfig }) => {
+    const td = document.createElement("td");
+    td.className = "px-4 py-2 border";
+
+    const input = createFooterInput({ key, onChangeFunc, showDataList, inColumnsConfig });
+    td.appendChild(input);
+
+    return td;
+};
+
+export { createFooterCell };

package/bin/table/v3/commands/table/template/v9/BuildTableOnly/BuildTableVersions/V1/BuildFooterVersions/V1/CreateFooterRow/createFooterInput.js

@@ -0,0 +1,29 @@
+// createFooterInput.js
+
+const createFooterInput = ({ key, onChangeFunc, showDataList, inColumnsConfig }) => {
+    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";
+
+    const findColumn = inColumnsConfig.find(element => {
+        return element.columnName === key;
+    });
+
+    if (showDataList && findColumn?.tableFooterDataListShow) {
+        input.setAttribute("list", `${key}List`);
+    };
+
+    // input.addEventListener("input", (e) => {
+    //     onChange?.({
+    //         key,
+    //         value: e.target.value
+    //     });
+    // });
+
+    return input;
+};
+
+export { createFooterInput };

package/bin/table/v3/commands/table/template/v9/BuildTableOnly/BuildTableVersions/V1/BuildFooterVersions/V1/CreateFooterRow/insertCells.js

@@ -0,0 +1,14 @@
+import { createFooterCell } from "./createFooterCell.js";
+
+const startFunc = (keys, tr, options = {}) => {
+    keys.forEach(key => {
+        tr.appendChild(createFooterCell({
+            key,
+            onChangeFunc: options.onChange,
+            showDataList: options.showDataList,
+            inColumnsConfig: options.inColumnsConfig
+        }));
+    });
+};
+
+export { startFunc };

package/bin/table/v3/commands/table/template/v9/BuildTableOnly/BuildTableVersions/V1/BuildFooterVersions/V1/CreateFooterRow/start.js

@@ -0,0 +1,23 @@
+import { startFunc as insertRowCells } from "./insertCells.js";
+import { appendFooterSaveCell } from "./appendFooterSaveCell.js";
+
+const startFunc = ({ keys, options }) => {
+    const tr = document.createElement("tr");
+
+    if (options?.showSerial) tr.appendChild(getSerialColumn());
+
+    insertRowCells(keys, tr, options);
+
+    tr.appendChild(appendFooterSaveCell(options));
+
+    return tr;
+};
+
+const getSerialColumn = () => {
+    const thIndex = document.createElement("td");
+    thIndex.className = "px-4 py-2 border";
+
+    return thIndex
+};
+
+export { startFunc };