tailwind-table-dom 1.1.6 → 1.2.8

package/bin/table/v2/commands/table/template/v7/BuildSearchForm/V2/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/v2/commands/table/template/v7/BuildSearchForm/V2/appendFieldset.js

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

package/bin/table/v2/commands/table/template/v7/BuildSearchForm/V2/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/v2/commands/table/template/v7/BuildSearchForm/V2/createFieldset.js

@@ -0,0 +1,14 @@
+const createFieldset = ({
+    inFormClass = 'grid grid-cols-3 gap-x-8 gap-y-4 p-6 verticalForm',
+    inIsDisabled
+}) => {
+
+    const localFieldset = document.createElement("fieldset");
+
+    localFieldset.className = inFormClass;
+    localFieldset.disabled = inIsDisabled;
+
+    return localFieldset;
+};
+
+export { createFieldset };

package/bin/table/v2/commands/table/template/v7/BuildSearchForm/V2/createForm.js

@@ -0,0 +1,65 @@
+// 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 = false,
+    inDefaultRow,
+    onSubmit,
+    uiClasses = {},
+    inIsDisabled,
+    inVisibleColumnsConfig = [],
+    inGetDataLists,
+    inServices,
+    inConfig,
+    inSearchableColumnsConfig,
+    inShowButton,
+    inDataStore
+}) => {
+    // debugger
+    const localForm = createFormElement();
+
+    const localFieldset = createFieldset({
+        inFormClass: uiClasses.formClass,
+        inIsDisabled
+    });
+
+    const localInputs = {};
+
+    appendFieldset({
+        inForm: localForm,
+        inFieldset: localFieldset
+    });
+    // debugger;
+    appendInputRows({
+        inFieldset: localFieldset,
+        inVisibleColumnsConfig,
+        inDefaultRow,
+        inInputs: localInputs,
+        inUiClasses: uiClasses,
+        inGetDataLists,
+        inServices,
+        inConfig,
+        inSearchableColumnsConfig,
+        inShowButton,
+        inDataStore
+    });
+
+    if (showSaveButton) {
+        appendSaveButton({
+            inFieldset: localFieldset,
+            inShowSaveButton: showSaveButton,
+            inButtonClass: uiClasses.buttonClass,
+            inInputs: localInputs,
+            inOnSubmit: onSubmit
+        });
+    };
+
+    return localForm;
+};
+
+export default createForm;

package/bin/table/v2/commands/table/template/v7/BuildSearchForm/V2/createFormElement.js

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

package/bin/table/v2/commands/table/template/v7/BuildSearchForm/V2/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/v2/commands/table/template/v7/BuildTableOnly/AddListeners/start.js

@@ -0,0 +1,15 @@
+import { funcToRun as funcToRunFortableSearch } from "./tableSearch/start.js";
+
+const hookAllListeners = ({ inContainerEl, inDataStore, inDom, inOptions }) => {
+    const columns = inDataStore.getColumns();
+    const visibleColumns = inDataStore.getVisibleColumns();
+
+    funcToRunFortableSearch({
+        inContainerEl, inDataStore,
+        inDom, inColumns: columns,
+        inVisibleColumns: visibleColumns,
+        inOptions
+    });
+};
+
+export { hookAllListeners };

package/bin/table/v2/commands/table/template/v7/BuildTableOnly/AddListeners/tableSearch/atThatState.js

@@ -0,0 +1,23 @@
+import { buildRows } from './orchestrator.js';
+
+const buildBodyAtThatState = ({
+    inColumns,
+    inDataToShow,
+    inContainerEl,
+    inDom,
+    searchValue = ""
+}) => {
+
+    const tableBody = inDom.getTableBody(inContainerEl);
+    tableBody.innerHTML = '';
+
+    const rows = buildRows({
+        data: inDataToShow,
+        columns: inColumns,
+        searchValue
+    });
+
+    rows.forEach(tr => tableBody.appendChild(tr));
+};
+
+export { buildBodyAtThatState };

package/bin/table/v2/commands/table/template/v7/BuildTableOnly/AddListeners/tableSearch/createCell.js

@@ -0,0 +1,12 @@
+import { highlightText } from "./highlight.js";
+
+const createCell = ({ value, searchValue }) => {
+    const td = document.createElement('td');
+    td.className = 'px-4 py-2 border';
+
+    td.innerHTML = highlightText(value, searchValue);
+
+    return td;
+};
+
+export { createCell };

package/bin/table/v2/commands/table/template/v7/BuildTableOnly/AddListeners/tableSearch/createRow.js

@@ -0,0 +1,35 @@
+import { createCell } from './createCell.js';
+
+const createIndexCell = (index) => {
+    const td = document.createElement('td');
+    td.className = 'px-4 py-2 border text-right';
+    td.textContent = index + 1;
+    return td;
+};
+
+const createDataCells = ({ item, columns, searchValue }) => {
+    return columns.map(k => {
+        const value = (item[k] ?? '').toString();
+
+        return createCell({
+            value,
+            searchValue
+        });
+    });
+};
+
+const createRow = ({ item, columns, index, searchValue }) => {
+    const tr = document.createElement('tr');
+    tr.className = 'border-t hover:bg-blue-100 odd:bg-gray-100';
+
+    // 1. index column
+    tr.appendChild(createIndexCell(index));
+
+    // 2. data columns
+    const cells = createDataCells({ item, columns, searchValue });
+    cells.forEach(td => tr.appendChild(td));
+
+    return tr;
+};
+
+export { createRow };

package/bin/table/v2/commands/table/template/v7/BuildTableOnly/AddListeners/tableSearch/highlight.js

@@ -0,0 +1,14 @@
+const escapeRegex = (str) => {
+    return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+};
+
+const highlightText = (text, search) => {
+    if (!search) return text;
+
+    const safeSearch = escapeRegex(search);
+    const regex = new RegExp(`(${safeSearch})`, "gi");
+
+    return text.replace(regex, `<span class="bg-yellow-300">$1</span>`);
+};
+
+export { highlightText };

package/bin/table/v2/commands/table/template/v7/BuildTableOnly/AddListeners/tableSearch/inputFunc.js

@@ -0,0 +1,37 @@
+import { pureBuildBody } from "../../BuildTableVersions/V2/BuildBodyVersions/V1/pureBuildBody.js";
+
+let timer;
+
+const inputFuncToRun = ({ e, inDataStore, inVisibleColumns, inContainerEl, inDom, inOptions }) => {
+    const columns = inVisibleColumns;
+
+    clearTimeout(timer);
+
+    timer = setTimeout(() => {
+        const searchValue = e.target.value;
+
+        // 1. global search
+        inDataStore.setSearchConfig({
+            type: "global",
+            value: searchValue
+        });
+
+        const dataToShow = inDataStore.getFinalData();
+debugger;
+        pureBuildBody({
+            inContainerEl,
+            inVisibleColumns: columns,
+            inData: dataToShow,
+            inDom,
+            searchValue,
+            options: {
+                showActions: inOptions?.table?.showRowOptions,
+                showSerial: inOptions?.table.showSerial,
+                onEdit: ({ item }) => console.log("edit", item),
+                onDelete: ({ index }) => console.log("delete", index)
+            }
+        });
+    }, 300);
+};
+
+export { inputFuncToRun };

package/bin/table/v2/commands/table/template/v7/BuildTableOnly/AddListeners/tableSearch/multiColumn.js

@@ -0,0 +1,42 @@
+import { buildBodyAtThatState } from "./atThatState.js";
+
+let timer;
+
+const transform = (inSearchValue) => {
+    const splitColumns = inSearchValue.split(",");
+
+    return splitColumns.map(element => {
+        const splitValues = element.split(":");
+
+        return {
+            key: splitValues[0],
+            value: splitValues[1]
+        };
+    });
+};
+
+const inputFuncToRun = ({ e, inDataStore, inColumns, inContainerEl, inDom }) => {
+    clearTimeout(timer);
+
+    timer = setTimeout(() => {
+        const searchValue = e.target.value;
+        const splitColumns = transform(searchValue);
+
+        // 3. multi column
+        inDataStore.setSearchConfig({
+            type: "multi",
+            filters: splitColumns
+        });
+
+        // 2. Re-render UI
+        const dataToShow = inDataStore.getFinalData();
+        buildBodyAtThatState({
+            inColumns,
+            inDataToShow: dataToShow,
+            inContainerEl, inDom
+        });
+
+    }, 300);
+};
+
+export { inputFuncToRun };

package/bin/table/v2/commands/table/template/v7/BuildTableOnly/AddListeners/tableSearch/orchestrator.js

@@ -0,0 +1,14 @@
+import { createRow } from "./createRow.js";
+
+const buildRows = ({ data, columns, searchValue }) => {
+    return data.map((item, index) => {
+        return createRow({
+            item,
+            columns,
+            index,
+            searchValue
+        });
+    });
+};
+
+export { buildRows };

package/bin/table/v2/commands/table/template/v7/BuildTableOnly/AddListeners/tableSearch/singleColumn.js

@@ -0,0 +1,29 @@
+import { buildBodyAtThatState } from "./atThatState.js";
+
+let timer;
+
+const inputFuncToRun = ({ e, inDataStore, inColumns, inContainerEl, inDom }) => {
+    clearTimeout(timer);
+
+    timer = setTimeout(() => {
+        const searchValue = e.target.value;
+        const splitValues = searchValue.split(":");
+
+        // 2. single column search
+        inDataStore.setSearchConfig({
+            type: "column",
+            key: splitValues[0],
+            value: splitValues[1]
+        });
+        // 2. Re-render UI
+        const dataToShow = inDataStore.getFinalData();
+        buildBodyAtThatState({
+            inColumns,
+            inDataToShow: dataToShow,
+            inContainerEl, inDom
+        });
+
+    }, 300);
+};
+
+export { inputFuncToRun };

package/bin/table/v2/commands/table/template/v7/BuildTableOnly/AddListeners/tableSearch/start.js

@@ -0,0 +1,27 @@
+import { inputFuncToRun } from "./inputFunc.js";
+import { inputFuncToRun as singleColumn } from "./singleColumn.js";
+import { inputFuncToRun as multiColumn } from "./multiColumn.js";
+
+const funcToRun = ({ inContainerEl, inDataStore, inDom, inColumns, inVisibleColumns, inOptions }) => {
+    const htmlElement = inDom.getSearchInput(inContainerEl);
+    // debugger;
+    if (htmlElement.classList.contains('ks-search-allColumns')) {
+        htmlElement.addEventListener("input", (e) => {
+            inputFuncToRun({ e, inDataStore, inVisibleColumns, inContainerEl, inDom, inOptions });
+        });
+    };
+
+    if (htmlElement.classList.contains('singleColumn')) {
+        htmlElement.addEventListener("input", (e) => {
+            singleColumn({ e, inDataStore, inColumns, inContainerEl, inDom });
+        });
+    };
+
+    if (htmlElement.classList.contains('multiColumn')) {
+        htmlElement.addEventListener("input", (e) => {
+            multiColumn({ e, inDataStore, inColumns, inContainerEl, inDom });
+        });
+    };
+};
+
+export { funcToRun };

package/bin/table/v2/commands/table/template/v7/BuildTableOnly/BuildDataLists/addToDom copy.js

@@ -0,0 +1,27 @@
+const buildDataLists = ({ inContainerEl, inDataStore, inDom, inVisibleColumns,
+    inData
+}) => {
+    const containerEl = inContainerEl;
+    const dom = inDom;
+    const columns = inDataStore.getDataListColumns().map(c => c.columnName);
+
+    const find = dom.getDataListContainerClass(containerEl);
+    if (!find) return;
+
+    find.innerHTML = "";
+
+    columns.forEach(col => {
+        const datalist = document.createElement("datalist");
+        datalist.id = col + "List";
+
+        const values = [...new Set(
+            inData.map(r => r[col]).filter(Boolean)
+        )];
+
+        datalist.innerHTML = values.map(v => `<option value="${v}">`).join("");
+
+        find.appendChild(datalist);
+    });
+};
+
+export { buildDataLists };

package/bin/table/v2/commands/table/template/v7/BuildTableOnly/BuildDataLists/addToDom.js

@@ -0,0 +1,67 @@
+const getSourceData = ({ cfg, inDataStore }) => {
+    if (!cfg.dataListSource) return [];
+    
+    const [source, key] = cfg.dataListSource.split(".");
+
+    // 🔥 get endpoint map
+    const endpoints = inDataStore.getAllDataLists();
+
+    const endpointKey = endpoints?.[source];
+
+    if (!endpointKey) return [];
+debugger;
+    // 🔥 now fetch actual data using endpointKey
+    const data = inDataStore.getDataList(source) || [];
+
+    if (!key) return data;
+
+    return data.map(r => r?.[key]);
+};
+
+const getUniqueValues = (data) => {
+    return [...new Set(data.filter(Boolean))];
+};
+
+const createDataListEl = (col, values) => {
+    const datalist = document.createElement("datalist");
+    datalist.id = col + "List";
+
+    datalist.innerHTML = values
+        .map(v => `<option value="${v}">`)
+        .join("");
+
+    return datalist;
+};
+
+const buildDataLists = ({
+    inContainerEl,
+    inDataStore,
+    inDom,
+    inData
+}) => {
+
+    const containerEl = inContainerEl;
+    const dom = inDom;
+
+    const configs = inDataStore.getDataListColumns();
+
+    const find = dom.getDataListContainerClass(containerEl);
+    if (!find) return;
+
+    find.innerHTML = "";
+
+    configs.forEach(cfg => {
+        const col = cfg.columnName;
+
+        // 🔥 CORE FIX
+        const sourceData = getSourceData({ cfg, inDataStore, inData });
+        debugger;
+        const values = getUniqueValues(sourceData);
+
+        const datalist = createDataListEl(col, values);
+
+        find.appendChild(datalist);
+    });
+};
+
+export { buildDataLists };

package/bin/table/v2/commands/table/template/v7/BuildTableOnly/BuildFirstColumn/TableHeading/start.js

@@ -0,0 +1,14 @@
+const renderTableHeading = ({ inDataStore, inContainerEl, inDom }) => {
+    const dataStore = inDataStore;
+    const containerEl = inContainerEl;
+    const dom = inDom;
+
+    const tableName = dataStore.getTableName();
+
+    const find = dom.getTableNameClass(containerEl);
+    if (!find) return;
+
+    find.innerHTML = tableName;
+};
+
+export { renderTableHeading };

package/bin/table/v2/commands/table/template/v7/BuildTableOnly/BuildForm/V1/createForm.js

@@ -0,0 +1,65 @@
+const collectFormData = (inputs) => {
+    const newItem = {};
+
+    Object.keys(inputs).forEach(key => {
+        newItem[key] = inputs[key].value;
+    });
+
+    return newItem;
+};
+
+const createInputRow = ({ col, defaultRow, inputs, inputClass, rowClass, labelClass }) => {
+    const row = document.createElement('div');
+    row.className = rowClass;
+
+    const label = document.createElement('label');
+    label.textContent = col;
+    label.className = labelClass;
+
+    const input = document.createElement('input');
+    input.className = inputClass;
+    input.name = col;
+
+    // auto-fill
+    input.value = defaultRow?.[col] ?? "";
+
+    inputs[col] = input;
+
+    row.appendChild(label);
+    row.appendChild(input);
+
+    return row;
+};
+
+const createForm = ({ columns, onSubmit, inDefaultRow, uiClasses }) => {
+    const { formClass, inputClass, buttonClass, rowClass, labelClass } = uiClasses;   // ✅ correct
+
+    const form = document.createElement('div');
+    form.className = formClass;
+
+    const inputs = {};
+
+    columns.forEach(col => {
+        const row = createInputRow({
+            col, defaultRow: inDefaultRow,
+            inputs,
+            inputClass, rowClass, labelClass
+        });
+        form.appendChild(row);
+    });
+
+    const button = document.createElement('button');
+    button.textContent = 'Save';
+    button.className = buttonClass;
+
+    button.onclick = () => {
+        const newItem = collectFormData(inputs);
+        onSubmit(newItem);
+    };
+
+    form.appendChild(button);
+
+    return form;
+};
+
+export { createForm };

package/bin/table/v2/commands/table/template/v7/BuildTableOnly/BuildForm/V2/clearFormInputs.js

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

package/bin/table/v2/commands/table/template/v7/BuildTableOnly/BuildForm/V2/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 };