tailwind-table-dom 3.11.2 → 3.12.1

package/bin/table/v3/commands/table/template/v12/BuildTableOnly/refresh.js

@@ -0,0 +1,31 @@
+import { buildDataLists } from "./BuildDataLists/addToDom.js";
+import { pureBuildBody } from "./BuildTableVersions/V2/BuildBodyVersions/V1/pureBuildBody.js";
+
+const refreshTable = ({ inContainerEl, inDataStore, inDom, inOptions, inVisibleColumns,
+    inServices, inEndPoints, onDelete, isBuildDataLists = false, inShowActions, inShowSerial }) => {
+    const data = inDataStore.getData();
+    const visibleColumns = inVisibleColumns;
+
+    if (isBuildDataLists) {
+        buildDataLists({
+            inContainerEl,
+            inDataStore,
+            inDom
+        });
+    };
+
+    pureBuildBody({
+        inContainerEl,
+        inData: data,
+        inVisibleColumns: visibleColumns,
+        inDom,
+        options: {
+            showActions: inShowActions,
+            showSerial: inShowSerial,
+            onEdit: ({ item }) => console.log("edit", item),
+            onDelete
+        }
+    });
+};
+
+export { refreshTable };

package/bin/table/v3/commands/table/template/v12/BuildTableOnly/start.js

@@ -0,0 +1,49 @@
+import { renderTableHeading } from "./BuildFirstColumn/TableHeading/start.js";
+import { initTable } from "./BuildTable/init.js";
+import { refreshTable } from "./BuildTable/refresh.js";
+import { buildForm } from "./BuildForm/start.js";
+import { buildDataLists } from "./BuildDataLists/addToDom.js";
+
+const refresh = ({ inContainerEl, inDataStore, inDom, inServices, inOptions, inEndPoints }) => {
+    buildDataLists({
+        inContainerEl,
+        inDataStore,
+        inDom
+    });
+
+    refreshTable({
+        inContainerEl,
+        inDataStore,
+        inDom,
+        inServices,
+        inOptions,
+        inEndPoints
+    });
+};
+
+const initRender = ({ inContainerEl, inDataStore, inDom, inServices, inOptions, inEndPoints }) => {
+    if (inOptions.vertical.showVertical) {
+        buildForm({
+            inContainerEl,
+            inDataStore,
+            inDom
+        });
+    };
+
+    renderTableHeading({
+        inContainerEl,
+        inDataStore,
+        inDom
+    });
+
+    initTable({
+        inContainerEl,
+        inDataStore,
+        inDom,
+        inServices,
+        inOptions,
+        inEndPoints
+    });
+};
+
+export { initRender, refresh };

package/bin/table/v3/commands/table/template/v12/BuildTableOnlyWithVersions/V1/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/v3/commands/table/template/v12/BuildTableOnlyWithVersions/V1/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/v3/commands/table/template/v12/BuildTableOnlyWithVersions/V1/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/v3/commands/table/template/v12/BuildTableOnlyWithVersions/V1/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/v3/commands/table/template/v12/BuildTableOnlyWithVersions/V1/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/v3/commands/table/template/v12/BuildTableOnlyWithVersions/V1/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/v3/commands/table/template/v12/BuildTableOnlyWithVersions/V1/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/v3/commands/table/template/v12/BuildTableOnlyWithVersions/V1/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/v3/commands/table/template/v12/BuildTableOnlyWithVersions/V1/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/v3/commands/table/template/v12/BuildTableOnlyWithVersions/V1/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/v3/commands/table/template/v12/BuildTableOnlyWithVersions/V1/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/v3/commands/table/template/v12/BuildTableOnlyWithVersions/V1/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/v3/commands/table/template/v12/BuildTableOnlyWithVersions/V1/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/v3/commands/table/template/v12/BuildTableOnlyWithVersions/V1/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/v3/commands/table/template/v12/BuildTableOnlyWithVersions/V1/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/v3/commands/table/template/v12/BuildTableOnlyWithVersions/V1/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 };

package/bin/table/v3/commands/table/template/v12/BuildTableOnlyWithVersions/V1/BuildForm/V2/createButton.js

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

package/bin/table/v3/commands/table/template/v12/BuildTableOnlyWithVersions/V1/BuildForm/V2/createForm.js

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

package/bin/table/v3/commands/table/template/v12/BuildTableOnlyWithVersions/V1/BuildForm/V2/createInputRow.js

@@ -0,0 +1,32 @@
+const createInputRow = ({ inCol, inDefaultRow, inInputs, inInputClass,
+    inRowClass, inLabelClass }) => {
+
+    const col = inCol;
+    const defaultRow = inDefaultRow;
+    const inputs = inInputs;
+    const inputClass = inInputClass;
+    const rowClass = inRowClass;
+    const labelClass = inLabelClass;
+
+    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;
+
+    input.value = defaultRow?.[col] ?? "";
+
+    inputs[col] = input;
+
+    row.appendChild(label);
+    row.appendChild(input);
+
+    return row;
+};
+
+export { createInputRow };

package/bin/table/v3/commands/table/template/v12/BuildTableOnlyWithVersions/V1/BuildForm/V2/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/v12/BuildTableOnlyWithVersions/V1/BuildForm/V3/clearFormInputs.js

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