tailwind-table-dom 1.1.6 → 1.3.11

package/bin/table/v3/commands/table/template/v11/SearchTable/CreateHeaderRow/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/v11/SearchTable/CreateHeaderRow/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/v11/SearchTable/CreateHeaderRow/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/v11/SearchTable/CreateHeaderRow/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/v11/SearchTable/CreateHeaderRow/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/v11/UI/SetFocus/V3/index.js

@@ -0,0 +1,20 @@
+const startFunc = ({ inContainerEl }) => {
+    // debugger;
+    focusToFooter({ inContainerEl });
+};
+
+const focusToFooter = ({ inContainerEl }) => {
+    const firstControl = inContainerEl.querySelector(
+        "tfoot input, tfoot select, tfoot textarea"
+    );
+
+    firstControl?.focus();
+};
+
+const focusToSearch = ({ inContainerEl }) => {
+    const focusControl = inContainerEl.querySelector(".tableSearchClass");
+
+    focusControl?.focus();
+};
+
+export default startFunc;

package/bin/table/v3/commands/table/template/v11/UI/SetFocus/V4/index.js

@@ -0,0 +1,27 @@
+const startFunc = ({ inContainerEl }) => {
+    if (!focusToFooter({ inContainerEl })) {
+        focusToSearch({ inContainerEl });
+    };
+
+    // focusToFooter({ inContainerEl });
+};
+
+const focusToFooter = ({ inContainerEl }) => {
+    const firstControl = inContainerEl.querySelector(
+        "tfoot input, tfoot select, tfoot textarea"
+    );
+
+    if (!firstControl) return false;
+
+    firstControl?.focus();
+
+    return true;
+};
+
+const focusToSearch = ({ inContainerEl }) => {
+    const focusControl = inContainerEl.querySelector(".tableSearchClass");
+
+    focusControl?.focus();
+};
+
+export default startFunc;

package/bin/table/v3/commands/table/template/v11/UI/compose/buildFullUI.js

@@ -0,0 +1,36 @@
+import { buildHeaderRow } from "../builders/buildHeaderRow.js";
+import { buildDataListContainer } from "../builders/buildDataListContainer.js";
+// import { buildTableShell } from "../builders/buildTableShell.js";
+
+import buildTableShell from "../BuilderVersions/V1/buildTableShell.js";
+
+export const buildFullUI = ({ containerEl, inTableName, inIsDataListNeeded = true,
+    inIsTableNeeded = true, inIsShowHeaderRow = false,
+    inUiClasses, clearOld = true }) => {
+
+    const root = containerEl;
+    root.className = "max-w-6xl mx-auto p-2";
+    // debugger;
+    if (clearOld) root.innerHTML = "";
+
+    let children = [];
+
+    if (inIsShowHeaderRow) {
+        const { header } = buildHeaderRow({ inTitleText: inTableName });
+
+        children.push(header);
+    };
+
+    if (inIsTableNeeded) {
+        const { wrapper } = buildTableShell({ inTableClassName: inUiClasses?.table?.tableClass });
+
+        children.push(wrapper);
+    };
+
+    if (inIsDataListNeeded) {
+        const { container: dataList } = buildDataListContainer();
+        children.push(dataList);
+    };
+
+    root.replaceChildren(...children);
+};

package/bin/table/v3/commands/table/template/v11/UI/mountCreate.js

@@ -0,0 +1,118 @@
+import buildHeader from "../BuildTableVersions/V4/BuildHeaderVersions/V4/index.js";
+import { buildBody } from "../BuildTableVersions/V4/BuildBodyVersions/V5/start.js";
+// import buildFooter from "../BuildTableVersions/V4/BuildFooterVersions/ForSummary/V8/start.js";
+import createForm from "../BuildSearchForm/V2/createForm.js";
+import buildDataLists from "../BuildDataLists/V2/addToDom.js";
+
+import buildFooter from "../BuildTableVersions/V4/BuildFooterVersions/ForSummary/V8/CreateFooterRow/V3/start.js";
+import SearchFuncs from "../TableFirstRow/V3/SearchFuncs/V4/index.js";
+
+import setFocus from "../UI/SetFocus/V2/index.js";
+
+import { buildFullUI } from "./compose/buildFullUI.js";
+
+const startFunc = ({
+    containerEl,
+    dataStore,
+    dom,
+    services,
+    options,
+    endPoints,
+    columnsConfig,
+    uiClasses,
+    callbacks,
+    inConfig,
+    inShowFooter = false
+}) => {
+
+    // debugger;
+    const visibleColumns = dataStore.getVisibleColumns();
+    const visibleColumnsConfig = dataStore.getVisibleColumnsConfig();
+    const searchableColumnsConfig = dataStore.getSearchableColumnsConfig();
+
+    const data = dataStore.getData();
+    const showSerial = options.table.showSerial;
+    const serialWidth = options.table.serialWidth;
+
+    const dataListArray = dataStore.getDataList("ledgers");
+    // debugger
+    const dataListColumns = dataStore.getDataListColumns();
+
+    const showTotals = options.table.showTotals;
+    const showBalance = options.table.showBalance;
+    const showFilterVerticalForm = options.showFilterVerticalForm;
+    const showSearch = options?.firstRow?.showSearch;
+    const showTotalsForSearch = options?.table?.showTotalsForSearch;
+    const showBalanceForSearch = options?.table?.showBalanceForSearch;
+    const showFooterRows = options?.table?.showFooterRows;
+
+    const findData = dataStore.getFindData();
+    const findDataFromParams = dataStore.getFindFromParams();
+
+    const isFormDisabled = options.vertical.isFormDisabled;
+    const showSaveButton = options.vertical.showSaveButton;
+
+    // debugger
+
+    buildFullUI({
+        containerEl: containerEl,
+        inTableName: inConfig.tableName,
+        inIsShowHeaderRow: showSearch,
+        inIsTableNeeded: false,
+        inIsShowHeaderRow: false
+    });
+
+    if (true) {
+        const handleSave = async (newItem) => {
+            const res = await services.actions.vertical.save({
+                inEndPoint: endPoints.create,
+                payload: newItem
+            });
+
+            if (res.ok) {
+                if (callbacks?.vertical?.onSuccess) {
+                    callbacks?.vertical?.onSuccess(res);
+                    return; // 🚫 stop library flow
+                };
+
+                return await true;
+            };
+        };
+
+        const searchForm = createForm({
+            inVisibleColumnsConfig: visibleColumnsConfig,
+            inSearchableColumnsConfig: visibleColumnsConfig,
+            inServices: services,
+            inConfig,
+            inShowButton: false,
+            uiClasses: uiClasses.form,
+            inDataStore: dataStore,
+            showSaveButton: showSaveButton,
+            onSubmit: handleSave,
+            inDefaultRow: findDataFromParams,
+            inIsDisabled: isFormDisabled
+        });
+
+        containerEl.prepend(searchForm);
+    };
+
+    // debugger;
+    buildDataLists({
+        inContainerEl: containerEl,
+        inDataStore: dataStore,
+        inDom: dom,
+        inData: data,
+        inDataListColumns: visibleColumnsConfig
+    });
+
+    // debugger;
+    if (showSearch) {
+        // for search vertical
+        SearchFuncs({ inContainerEl: containerEl });
+    };
+
+    setFocus({ inContainerEl: containerEl });
+};
+
+export default startFunc;
+

package/bin/table/v3/commands/table/template/v11/UI/mountShowTable.js

@@ -0,0 +1,125 @@
+import buildHeader from "../BuildTableVersions/V4/BuildHeaderVersions/V4/index.js";
+// import { buildBody } from "../BuildTableVersions/V4/BuildBodyVersions/V5/start.js";
+// import buildFooter from "../BuildTableVersions/V4/BuildFooterVersions/ForSummary/V8/start.js";
+import createForm from "../BuildSearchForm/V1/createForm.js";
+import buildDataLists from "../BuildDataLists/V2/addToDom.js";
+
+import buildFooter from "../BuildTableVersions/V4/BuildFooterVersions/ForSummary/V8/CreateFooterRow/V3/start.js";
+import SearchFuncs from "../TableFirstRow/V3/SearchFuncs/V4/index.js";
+
+import { buildFullUI } from "./compose/buildFullUI.js";
+
+import buildBody from "../BuildTableVersions/V4/BuildBodyVersions/V6/start.js";
+
+const startFunc = ({
+    containerEl,
+    dataStore,
+    dom,
+    services,
+    options,
+    endPoints,
+    columnsConfig,
+    uiClasses,
+    callbacks,
+    inConfig,
+    inShowFooter = false
+}) => {
+    debugger
+
+    const visibleColumns = dataStore.getVisibleColumns();
+    const visibleColumnsConfig = dataStore.getVisibleColumnsConfig();
+    const searchableColumnsConfig = dataStore.getSearchableColumnsConfig();
+
+    const data = dataStore.getData();
+    const showSerial = options.table.showSerial;
+    const serialWidth = options.table.serialWidth;
+
+    const dataListArray = dataStore.getDataList("AccountName");
+
+    const dataListColumns = dataStore.getDataListColumns();
+
+    const showTotals = options.table.showTotals;
+    const showBalance = options.table.showBalance;
+    const showFilterVerticalForm = options.showFilterVerticalForm;
+    const showSearch = options.firstRow.showSearch;
+    const showTotalsForSearch = options?.table?.showTotalsForSearch;
+    const showBalanceForSearch = options?.table?.showBalanceForSearch;
+    const showFooterRows = options?.table?.showFooterRows;
+
+    buildFullUI({
+        containerEl: containerEl,
+        inTableName: inConfig.tableName,
+        inIsShowHeaderRow: showSearch
+    });
+
+    if (showFilterVerticalForm) {
+        const searchForm = createForm({
+            inVisibleColumnsConfig: visibleColumnsConfig,
+            inSearchableColumnsConfig: searchableColumnsConfig,
+            inServices: services,
+            inConfig
+        });
+
+        containerEl.prepend(searchForm);
+    };
+
+    buildHeader({
+        inContainerEl: containerEl,
+        inDom: dom,
+        inThClassName: uiClasses?.thead?.thClass,
+        inTrClassName: uiClasses?.thead?.trClass,
+        inThSerialClassName: uiClasses?.thead?.thSerialClass,
+        inVisibleColumnsConfig: visibleColumnsConfig,
+        inShowSerial: showSerial,
+        inSerialWidth: serialWidth
+    });
+
+    const tableBody = dom.getTableBody(containerEl);
+    debugger;
+    buildBody({
+        inDataStore: dataStore,
+        inContainerEl: containerEl,
+        inDom: dom,
+        inVisibleColumnsConfig: visibleColumnsConfig,
+        inShowSerial: showSerial,
+        inShowActions: showActions,
+        inServices: services,
+        inEndPoints: endPoints,
+        inConfig,
+        inTableBody: tableBody,
+        inData: data
+    });
+
+    if (inShowFooter) {
+        buildFooter({
+            inTableFooter: dom.getTableFooter(containerEl),
+            options,
+            inVisibleColumnsConfig: visibleColumnsConfig,
+            inData: data,
+            inShowSerial: showSerial,
+            inShowTotals: showTotals,
+            inShowBalance: showBalance,
+            inShowTotalsForSearch: showTotalsForSearch,
+            inShowBalanceForSearch: showBalanceForSearch,
+            inShowFooterRows: showFooterRows
+        });
+    };
+
+    // debugger;
+    buildDataLists({
+        inContainerEl: containerEl,
+        inDataStore: dataStore,
+        inDom: dom,
+        inData: data,
+        inDataListColumns: searchableColumnsConfig
+    });
+
+    // debugger;
+    if (showSearch) {
+        // for search vertical
+        SearchFuncs({ inContainerEl: containerEl });
+    };
+};
+
+export default startFunc;
+

package/bin/table/v3/commands/table/template/v11/UI/mountTableWithFooter.js

@@ -0,0 +1,149 @@
+import buildHeader from "../BuildTableVersions/V4/BuildHeaderVersions/V4/index.js";
+
+// import { buildBody } from "../BuildTableVersions/V4/BuildBodyVersions/V5/start.js";
+
+import createForm from "../BuildSearchForm/V1/createForm.js";
+import buildDataLists from "../BuildDataLists/V2/addToDom.js";
+
+// import buildFooter from "../BuildTableVersions/V4/BuildFooterVersions/ForCreate/V3/start.js";
+import buildFooter from "../BuildTableVersions/V4/BuildFooterVersions/ForCreate/V4/start.js";
+
+import SearchFuncs from "../TableFirstRow/V3/SearchFuncs/V4/index.js";
+import setFocus from "../UI/SetFocus/V3/index.js";
+
+import buildBody from "../BuildTableVersions/V4/BuildBodyVersions/V6/start.js";
+
+import { buildFullUI } from "./compose/buildFullUI.js";
+
+const startFunc = ({
+    containerEl,
+    dataStore,
+    dom,
+    services,
+    options,
+    endPoints,
+    columnsConfig,
+    uiClasses,
+    callbacks,
+    inConfig
+}) => {
+    // debugger
+
+    const visibleColumns = dataStore.getVisibleColumns();
+    const visibleColumnsConfig = dataStore.getVisibleColumnsConfig();
+    const searchableColumnsConfig = dataStore.getSearchableColumnsConfig();
+
+    const data = dataStore.getData();
+    const showSerial = options.table.showSerial;
+    const serialWidth = options.table.serialWidth;
+    const showDataList = options.table.showDataList;
+    const optionsWidth = options.table.optionsWidth;
+
+    const dataListColumns = dataStore.getDataListColumns();
+
+    const showTotals = options.table.showTotals;
+    const showBalance = options.table.showBalance;
+    const showFilterVerticalForm = options.showFilterVerticalForm;
+    const showSearch = options.firstRow.showSearch;
+    const showTotalsForSearch = options?.table?.showTotalsForSearch;
+    const showBalanceForSearch = options?.table?.showBalanceForSearch;
+    const showFooterRows = options?.table?.showFooterRows;
+
+    const defaultRow = dataStore.getDefaultRow();
+    const showSave = options?.table?.showSave;
+    const showActions = options?.table?.showActions;
+    const showFooter = options?.table?.showFooter;
+
+    // debugger;
+    buildFullUI({
+        containerEl: containerEl,
+        inTableName: inConfig.tableName,
+        inIsShowHeaderRow: showSearch,
+        inUiClasses: uiClasses
+    });
+    // debugger;
+    const tableBody = dom.getTableBody(containerEl);
+    // console.log("tableBody : ", tableBody);
+
+    if (showFilterVerticalForm) {
+        const searchForm = createForm({
+            inVisibleColumnsConfig: visibleColumnsConfig,
+            inSearchableColumnsConfig: searchableColumnsConfig,
+            inServices: services,
+            inConfig
+        });
+
+        containerEl.prepend(searchForm);
+    };
+
+    buildHeader({
+        inContainerEl: containerEl,
+        inDom: dom,
+        inThClassName: uiClasses?.thead?.thClass,
+        inTrClassName: uiClasses?.thead?.trClass,
+        inThSerialClassName: uiClasses?.thead?.thSerialClass,
+        inVisibleColumnsConfig: visibleColumnsConfig,
+        inShowSerial: showSerial,
+        inSerialWidth: serialWidth,
+        inShowActions: showActions || showSave,
+        inOptionsWidth: optionsWidth,
+    });
+
+    buildBody({
+        inDataStore: dataStore,
+        inContainerEl: containerEl,
+        inDom: dom,
+        inVisibleColumnsConfig: visibleColumnsConfig,
+        inShowSerial: showSerial,
+        inShowActions: showActions,
+        inServices: services,
+        inEndPoints: endPoints,
+        inConfig,
+        inTableBody: tableBody,
+        inData: data
+    });
+
+    if (showFooter) {
+        buildFooter({
+            inServices: services,
+            inEndPoints: endPoints,
+            inTableFooter: dom.getTableFooter(containerEl),
+            inOptions: options,
+            inVisibleColumnsConfig: visibleColumnsConfig,
+            inData: data,
+            inShowSerial: showSerial,
+            inShowTotals: showTotals,
+            inShowBalance: showBalance,
+            inShowTotalsForSearch: showTotalsForSearch,
+            inShowBalanceForSearch: showBalanceForSearch,
+            inShowFooterRows: showFooterRows,
+            inDefaultRow: defaultRow,
+            keys: visibleColumns,
+            inDom: dom,
+            inShowDataList: showDataList,
+            inDataStore: dataStore,
+            inShowSave: showSave,
+            inTableBody: tableBody,
+            inShowActions: showActions
+        });
+    };
+
+    if (showDataList) {
+        buildDataLists({
+            inContainerEl: containerEl,
+            inDataStore: dataStore,
+            inDom: dom,
+            inData: data,
+            inDataListColumns: dataListColumns
+        });
+    };
+
+    if (showSearch) {
+        // for search vertical
+        SearchFuncs({ inContainerEl: containerEl });
+    };
+
+    setFocus({ inContainerEl: containerEl });
+};
+
+export default startFunc;

package/bin/table/v3/commands/table/template/v11/entry.js

@@ -0,0 +1,46 @@
+import { KSAiTable } from "./ai.js";
+
+// // entry.js
+// export const initTable = async (cfg) => {
+//     // debugger;
+//     const table = new KSAiTable(cfg);
+//     await table.init();   // ✅ THIS is missing
+//     return table;
+// };
+
+// export const initVertical = async (cfg) => {
+//     // debugger;
+//     const table = new KSAiTable(cfg);
+//     await table.initVertical();   // ✅ THIS is missing
+//     return table;
+// };
+
+// export const initTableOnly = async (cfg) => {
+//     // debugger;
+//     const table = new KSAiTable(cfg);
+//     await table.initTable();   // ✅ THIS is missing
+//     return table;
+// };
+
+export const initShowTable = async (cfg) => {
+    // debugger;
+    const table = new KSAiTable(cfg);
+    await table.initShowTable();   // ✅ THIS is missing
+    return table;
+};
+
+export const initCreate = async (cfg) => {
+    // debugger;
+    const table = new KSAiTable(cfg);
+    await table.initCreate();   // ✅ THIS is missing
+    return table;
+};
+
+export const initTableWithFooter = async (cfg) => {
+    // debugger;
+    const table = new KSAiTable(cfg);
+    await table.initTableWithFooter();   // ✅ THIS is missing
+    return table;
+};
+
+// v3.11

package/bin/table/v3/commands/table/template/v9/BuildDataLists/V1/addToDom.js

@@ -0,0 +1,68 @@
+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,
+    inDataListColumns
+}) => {
+
+    const containerEl = inContainerEl;
+    const dom = inDom;
+
+    const configs = inDataListColumns;
+
+    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 default buildDataLists;