json-renderers 1.12.2 → 1.13.2

package/src/v5/navTabs/fragments.json

@@ -1,59 +0,0 @@
-{
-    "navTabsList": {
-        "tagName": "ul",
-        "attributes": {
-            "class": "nav nav-tabs",
-            "role": "tablist"
-        },
-        "jsonToSpec": {
-            "operation": "loopArray",
-            "source": "tabs",
-            "template": {
-                "tagName": "li",
-                "attributes": {
-                    "class": "nav-item",
-                    "role": "presentation"
-                },
-                "children": [
-                    {
-                        "tagName": "button",
-                        "attributes": {
-                            "class": "nav-link ${activeClass}",
-                            "id": "${id}-tab",
-                            "data-bs-toggle": "tab",
-                            "data-bs-target": "#${id}-pane",
-                            "type": "button",
-                            "role": "tab",
-                            "aria-controls": "${id}-pane",
-                            "aria-selected": "${isSelected}"
-                        },
-                        "textContent": "${label}"
-                    }
-                ]
-            }
-        },
-        "children": []
-    },
-    "tabContent": {
-        "tagName": "div",
-        "attributes": {
-            "class": "tab-content pt-3"
-        },
-        "jsonToSpec": {
-            "operation": "loopArray",
-            "source": "tabs",
-            "template": {
-                "tagName": "div",
-                "attributes": {
-                    "class": "tab-pane fade ${showActiveClass}",
-                    "id": "${id}-pane",
-                    "role": "tabpanel",
-                    "aria-labelledby": "${id}-tab",
-                    "tabindex": "0"
-                },
-                "textContent": "${content}"
-            }
-        },
-        "children": []
-    }
-}

package/src/v5/navTabs/index.js

@@ -1,82 +0,0 @@
-import skeletonToSpec from "../../../../../skeletonToSpec/v3/index.js";
-import jsonToSpec from "../../../jsonToSpec/v2/index.js";
-import jsonToTag from "../../../jsonToTag/v2/index.js";
-
-import skeletonJson from './skeleton.json' with {type: 'json'};
-import fragmentsJson from './fragments.json' with {type: 'json'};
-
-const startFunc = ({
-    targetHtmlId,
-    inTargetHtmlId,
-    inTabs = [],
-    inData = [],
-    inSkeletonType = "default",
-    inShowLog = false
-} = {}) => {
-    const localTargetHtmlId = inTargetHtmlId ?? targetHtmlId;
-    const localTabs = inTabs;
-    const localData = inData;
-    const localSkeletonType = inSkeletonType;
-    const localShowLog = inShowLog;
-
-    try {
-        let tabsArray = [];
-
-        if (Array.isArray(localTabs) && localTabs.length > 0) {
-            tabsArray = localTabs.map((tab, idx) => ({
-                id: tab.id ?? `tab-${idx + 1}`,
-                label: tab.label ?? tab.title ?? `Tab ${idx + 1}`,
-                activeClass: tab.activeClass ?? (idx === 0 ? "active" : ""),
-                showActiveClass: tab.showActiveClass ?? (idx === 0 ? "show active" : ""),
-                isSelected: tab.isSelected ?? (idx === 0 ? "true" : "false"),
-                content: tab.content ?? ""
-            }));
-        } else if (Array.isArray(localData) && localData.length > 0) {
-            tabsArray = localData.map((row, idx) => {
-                const id = `tab-${row.VOUCHERNUMBER ?? row.id ?? idx + 1}`;
-                const label = row.REFERENCE || row.VOUCHERTYPENAME || `Tab ${idx + 1}`;
-                const isActive = idx === 0;
-                return {
-                    id,
-                    label,
-                    activeClass: isActive ? "active" : "",
-                    showActiveClass: isActive ? "show active" : "",
-                    isSelected: isActive ? "true" : "false",
-                    content: ""
-                };
-            });
-        }
-
-        const dataAsJson = { tabs: tabsArray };
-
-        const rawSkeleton = skeletonJson[localSkeletonType] ?? skeletonJson.default ?? skeletonJson;
-        const targetSkeleton = structuredClone(rawSkeleton);
-
-        if (localShowLog) console.log("navTabs targetSkeleton : ", targetSkeleton);
-
-        const structureJson = skeletonToSpec({
-            inSkeleton: targetSkeleton,
-            inFragments: fragmentsJson
-        });
-        if (localShowLog) console.log("navTabs structureJson : ", structureJson);
-
-        const specAsJsonToDom = jsonToSpec({ specJson: structureJson, dataJson: dataAsJson, showLog: false });
-        if (localShowLog) console.log("navTabs specAsJsonToDom : ", specAsJsonToDom);
-
-        const fromRenderer = jsonToTag(specAsJsonToDom);
-
-        const html = (typeof localTargetHtmlId === "string")
-            ? document.getElementById(localTargetHtmlId)
-            : localTargetHtmlId;
-
-        if (!html) return fromRenderer;
-
-        html.append(fromRenderer);
-        return fromRenderer;
-    } catch (error) {
-        console.log("error : ", error);
-    };
-};
-
-export { startFunc };
-export default startFunc;

package/src/v5/navTabs/skeleton.json

@@ -1,18 +0,0 @@
-{
-    "default": {
-        "tagName": "div",
-        "attributes": {
-            "class": "bootstrap-nav-tabs"
-        },
-        "slots": [
-            "navTabsList",
-            "tabContent"
-        ]
-    },
-    "tabsOnly": {
-        "tagName": "div",
-        "slots": [
-            "navTabsList"
-        ]
-    }
-}

package/src/v5/registerGlobal.js

@@ -1,14 +0,0 @@
-import meta from "./meta.js";
-
-export const registerGlobal = (inFuncDefinition) => {
-    if (typeof globalThis === "undefined" || !inFuncDefinition) return;
-
-    globalThis.ks ??= {};
-
-    globalThis.ks.jsonRenderers ??= {
-        meta,
-        renderToDom: inFuncDefinition
-    };
-};
-
-export default registerGlobal;

package/src/v5/select/fragments.json

@@ -1 +0,0 @@
-{}

package/src/v5/select/index.js

@@ -1,31 +0,0 @@
-// import jsonTraversal from "json-traversal";
-
-import jsonToSpec from "../../../node_modules/json-to-spec/index.js";
-import jsonToTag from "../../../node_modules/@keshavsoft/json-to-tag/index.js";
-
-import skeletonJson from "./skeleton.json" with { type: "json" };
-
-const startFunc = ({ targetHtmlId, inData,
-    inSkeletonType = "default", inClassToApply } = {}) => {
-    const skeletonNeeded = skeletonJson[inSkeletonType];
-    skeletonNeeded.attributes.class = inClassToApply;
-
-    const specAsJsonToDom = jsonToSpec({
-        specJson: skeletonNeeded,
-        dataJson: inData
-    });
-
-    const container = document.getElementById(targetHtmlId);
-    if (container) container.innerHTML = "";
-
-    const createdElement = jsonToTag(specAsJsonToDom);
-
-    if (Array.isArray(createdElement)) {
-        // container.appendChild(createdElement)
-        createdElement.forEach(element => container.append(element));
-    } else {
-        container.append(createdElement);
-    };
-};
-
-export default startFunc;

package/src/v5/select/skeleton.json

@@ -1,21 +0,0 @@
-{
-    "default": {
-        "tagName": "select",
-        "attributes": {
-            "id": "LedgerName",
-            "class": "keshav"
-        },
-        "jsonToSpec": {
-            "operation": "loopArray",
-            "source": "LedgerName",
-            "template": {
-                "tagName": "option",
-                "attributes": {
-                    "value": "${}"
-                },
-                "textContent": "${}"
-            }
-        },
-        "children": []
-    }
-}

package/src/v5/table/attachTableClickEventListener.js

@@ -1,22 +0,0 @@
-import clickFunc from "./clickFunc/v3/index.js";
-
-// Story 5: Attach click event listener for child table rendering
-const startFunc = ({
-    inTargetContainer,
-    inData,
-    inColumns,
-    inRenderFunc,
-    inTargetHtmlId
-} = {}) => {
-    inTargetContainer.addEventListener('click', (event) => {
-        clickFunc({
-            inEvent: event,
-            inData,
-            inColumns,
-            inRenderFunc,
-            inTargetHtmlId
-        });
-    });
-};
-
-export default startFunc;

package/src/v5/table/buildTableDataAsJson.js

@@ -1,19 +0,0 @@
-// Story 1: Prepare table data payload as JSON
-const startFunc = ({
-    inColumns,
-    inData,
-    inColGroup,
-    inFooterData = [],
-    inConfig = {}
-} = {}) => {
-    return {
-        columns: inColumns,
-        data: inData,
-        colGroup: inColGroup,
-        foot: inFooterData,
-        title: inConfig?.title ?? inConfig?.caption?.text ?? "",
-        footerText: inConfig?.footerText ?? ""
-    };
-};
-
-export default startFunc;

package/src/v5/table/buildTableDomElement.js

@@ -1,21 +0,0 @@
-import jsonToSpec from "../../../jsonToSpec/v2/index.js";
-import jsonToTag from "../../../jsonToTag/v2/index.js";
-
-// Story 3: Generate table DOM element from structure specification and data
-const startFunc = ({
-    inStructureJson,
-    inDataAsJson,
-    inShowLog = false
-} = {}) => {
-    const specAsJsonToDom = jsonToSpec({
-        specJson: inStructureJson,
-        dataJson: inDataAsJson,
-        showLog: inShowLog
-    });
-
-    if (inShowLog) console.log("specAsJsonToDom : ", specAsJsonToDom);
-
-    return jsonToTag(specAsJsonToDom);
-};
-
-export default startFunc;

package/src/v5/table/buildTableStructureSpec.js

@@ -1,28 +0,0 @@
-import skeletonToSpec from "../../../../../skeletonToSpec/v3/index.js";
-
-import skeletonJson from './skeleton.json' with {type: 'json'};
-import fragmentsJson from './fragments.json' with {type: 'json'};
-
-// Story 2: Build table structure specification from skeleton and fragments
-const startFunc = ({
-    inSkeletonType = "default",
-    inSkeletonJson = skeletonJson,
-    inFragmentsJson = fragmentsJson,
-    inShowLog = false
-} = {}) => {
-    const rawSkeleton = inSkeletonJson[inSkeletonType] ?? inSkeletonJson.default ?? inSkeletonJson;
-    const targetSkeleton = structuredClone(rawSkeleton);
-
-    if (inShowLog) console.log("targetSkeleton : ", targetSkeleton);
-
-    const structureJson = skeletonToSpec({
-        inSkeleton: targetSkeleton,
-        inFragments: inFragmentsJson
-    });
-
-    if (inShowLog) console.log("structureJson : ", structureJson);
-
-    return structureJson;
-};
-
-export default startFunc;

package/src/v5/table/clickFunc/v3/createTable.js

@@ -1,16 +0,0 @@
-import deriveColumnsFromData from "../../../../v4/common/deriveColumnsFromData.js";
-
-// Step 2: Create the child table inside the container
-const startFunc = ({ inChildTableContainer, inContainer, inRenderFunc } = {}) => {
-    const targetContainer = inChildTableContainer || inContainer;
-    const childTableData = targetContainer?.childData;
-
-    inRenderFunc({
-        inTargetHtmlId: targetContainer,
-        inColumns: deriveColumnsFromData({ inData: childTableData }),
-        inData: childTableData,
-        inSkeletonType: "tableOnly"
-    });
-};
-
-export default startFunc;

package/src/v5/table/clickFunc/v3/getContainer/extractClickedRowDetails.js

@@ -1,23 +0,0 @@
-// Step 1: Who clicked what? (Resolve parent row, column key, and child table data)
-const startFunc = ({ inEvent, inColumns, inData } = {}) => {
-    const clickedButton = inEvent?.target?.closest("button");
-    if (!clickedButton) return null;
-
-    const parentRow = clickedButton.closest("tr");
-    const parentCell = clickedButton.closest("td");
-    if (!parentRow || !parentCell) return null;
-
-    const parentRowIndex = parentRow.sectionRowIndex;
-    const childColumnKey = inColumns?.[parentCell.cellIndex]?.key;
-    const childTableData = inData?.[parentRowIndex]?.[childColumnKey];
-
-    if (!Array.isArray(childTableData) || childTableData.length === 0) return null;
-
-    return {
-        parentRowIndex,
-        childColumnKey,
-        childTableData
-    };
-};
-
-export default startFunc;

package/src/v5/table/clickFunc/v3/getContainer/getOrCreateChildTableContainer.js

@@ -1,21 +0,0 @@
-// Step 2: Where does the child table live? (Find or create the container div)
-const startFunc = ({ inTargetHtmlId, inChildColumnKey } = {}) => {
-    const targetTableElement = (typeof inTargetHtmlId === "string")
-        ? document.getElementById(inTargetHtmlId)
-        : inTargetHtmlId;
-    if (!targetTableElement) return null;
-
-    const childContainerHtmlId = `${targetTableElement.id || "table"}-${inChildColumnKey}`;
-    let childTableContainer = document.getElementById(childContainerHtmlId);
-
-    if (!childTableContainer) {
-        childTableContainer = document.createElement("div");
-        childTableContainer.id = childContainerHtmlId;
-        childTableContainer.className = "child-table-container mt-3";
-        targetTableElement.insertAdjacentElement("afterend", childTableContainer);
-    }
-
-    return childTableContainer;
-};
-
-export default startFunc;

package/src/v5/table/clickFunc/v3/getContainer/index.js

@@ -1,39 +0,0 @@
-import extractClickedRowDetails from "./extractClickedRowDetails.js";
-import getOrCreateChildTableContainer from "./getOrCreateChildTableContainer.js";
-import isSameRowClickedToToggleOff from "./isSameRowClickedToToggleOff.js";
-import resetAndShowChildTableContainer from "./resetAndShowChildTableContainer.js";
-
-// --- Story of getContainer ---
-const startFunc = ({ inEvent, inTargetHtmlId, inColumns, inData } = {}) => {
-    // Story 1: Who was clicked? (Resolve parent row and child table data)
-    const clickedRowDetails = extractClickedRowDetails({
-        inEvent,
-        inColumns,
-        inData
-    });
-    if (!clickedRowDetails) return null;
-
-    // Story 2: Where does the child table container go?
-    const childTableContainer = getOrCreateChildTableContainer({
-        inTargetHtmlId,
-        inChildColumnKey: clickedRowDetails.childColumnKey
-    });
-    if (!childTableContainer) return null;
-
-    // Story 3: Same row clicked again? Close it.
-    if (isSameRowClickedToToggleOff({
-        inChildTableContainer: childTableContainer,
-        inParentRowIndex: clickedRowDetails.parentRowIndex
-    })) {
-        return null;
-    }
-
-    // Story 4: Clean and activate container for rendering
-    return resetAndShowChildTableContainer({
-        inChildTableContainer: childTableContainer,
-        inClickedRowDetails: clickedRowDetails
-    });
-};
-
-export { startFunc };
-export default startFunc;

package/src/v5/table/clickFunc/v3/getContainer/isSameRowClickedToToggleOff.js

@@ -1,14 +0,0 @@
-// Step 3: Did user click the same row again? Close it (toggle)
-const startFunc = ({ inChildTableContainer, inParentRowIndex } = {}) => {
-    const isMatchingActiveRow = inChildTableContainer.dataset.activeRow === String(inParentRowIndex);
-    const isCurrentlyVisible = inChildTableContainer.style.display !== "none";
-
-    if (isMatchingActiveRow && isCurrentlyVisible) {
-        inChildTableContainer.style.display = "none";
-        return true;
-    }
-
-    return false;
-};
-
-export default startFunc;

package/src/v5/table/clickFunc/v3/getContainer/resetAndShowChildTableContainer.js

@@ -1,12 +0,0 @@
-// Step 4: Ready the container for the new child table
-const startFunc = ({ inChildTableContainer, inClickedRowDetails } = {}) => {
-    inChildTableContainer.style.display = "";
-    inChildTableContainer.dataset.activeRow = String(inClickedRowDetails.parentRowIndex);
-    inChildTableContainer.dataset.fieldName = inClickedRowDetails.childColumnKey;
-    inChildTableContainer.innerHTML = "";
-    inChildTableContainer.childData = inClickedRowDetails.childTableData;
-
-    return inChildTableContainer;
-};
-
-export default startFunc;

package/src/v5/table/clickFunc/v3/index.js

@@ -1,21 +0,0 @@
-import getContainer from "./getContainer/index.js";
-import createTable from "./createTable.js";
-
-// Main click handler: only 2 clear steps from the outside
-const clickFunc = ({
-    inEvent,
-    inData,
-    inColumns,
-    inRenderFunc,
-    inTargetHtmlId
-} = {}) => {
-    // 1. Get or prepare child table container
-    const childTableContainer = getContainer({ inEvent, inTargetHtmlId, inColumns, inData });
-    if (!childTableContainer) return;
-
-    // 2. Create and render child table inside the container
-    createTable({ inChildTableContainer: childTableContainer, inRenderFunc });
-};
-
-export { clickFunc };
-export default clickFunc;

package/src/v5/table/fragments.json

@@ -1,112 +0,0 @@
-{
-    "colGroup": {
-        "tagName": "colgroup",
-        "jsonToSpec": {
-            "operation": "loopArray",
-            "source": "colGroup",
-            "template": {
-                "tagName": "col",
-                "attributes": {
-                    "style": "${style}"
-                }
-            }
-        },
-        "children": []
-    },
-    "thead": {
-        "tagName": "thead",
-        "attributes": {
-            "class": "table-dark"
-        },
-        "children": [
-            {
-                "tagName": "tr",
-                "jsonToSpec": {
-                    "operation": "loopArray",
-                    "source": "columns",
-                    "template": {
-                        "tagName": "th",
-                        "textContent": "${label}"
-                    }
-                },
-                "children": []
-            }
-        ]
-    },
-    "tbody": {
-        "tagName": "tbody",
-        "attributes": {
-            "id": "table-body"
-        },
-        "jsonToSpec": {
-            "operation": "loopArray",
-            "source": "data",
-            "template": {
-                "tagName": "tr",
-                "jsonToSpec": {
-                    "operation": "loopObject",
-                    "source": "data",
-                    "template": {
-                        "tagName": "td",
-                        "attributes": {
-                            "class": "tdddddd ${value}"
-                        },
-                        "textContent": "${value}"
-                    }
-                },
-                "children": []
-            }
-        },
-        "children": []
-    },
-    "tfoot": {
-        "tagName": "tfoot",
-        "attributes": {
-            "class": "table-light fw-bold"
-        },
-        "jsonToSpec": {
-            "operation": "loopArray",
-            "source": "foot",
-            "template": {
-                "tagName": "tr",
-                "jsonToSpec": {
-                    "operation": "loopObject",
-                    "source": "foot",
-                    "template": {
-                        "tagName": "td",
-                        "textContent": "${value}"
-                    }
-                },
-                "children": []
-            }
-        },
-        "children": []
-    },
-    "cardHeader": {
-        "tagName": "div",
-        "attributes": {
-            "class": "d-flex justify-content-between align-items-center"
-        },
-        "children": [
-            {
-                "tagName": "h5",
-                "attributes": {
-                    "class": "card-title mb-0"
-                },
-                "textContent": "${title}"
-            }
-        ]
-    },
-    "cardFooter": {
-        "tagName": "div",
-        "attributes": {
-            "class": "d-flex justify-content-between align-items-center text-muted small"
-        },
-        "children": [
-            {
-                "tagName": "span",
-                "textContent": "${footerText}"
-            }
-        ]
-    }
-}

package/src/v5/table/index.js

@@ -1,72 +0,0 @@
-import buildTableDataAsJson from "./buildTableDataAsJson.js";
-import buildTableStructureSpec from "./buildTableStructureSpec.js";
-import buildTableDomElement from "./buildTableDomElement.js";
-import resolveTargetContainer from "./resolveTargetContainer.js";
-import attachTableClickEventListener from "./attachTableClickEventListener.js";
-
-import skeletonJson from './skeleton.json' with {type: 'json'};
-import fragmentsJson from './fragments.json' with {type: 'json'};
-
-// --- Story of Table Render ---
-const startFunc = ({
-    targetHtmlId,
-    inTargetHtmlId,
-    inColumns,
-    inData,
-    inColGroup,
-    inFooterData = [],
-    inConfig = {},
-    inSkeletonType = "default",
-    inShowLog = false
-} = {}) => {
-    const localTargetHtmlId = inTargetHtmlId ?? targetHtmlId;
-
-    try {
-        // Story 1: Prepare table data payload as JSON
-        const tableDataAsJson = buildTableDataAsJson({
-            inColumns,
-            inData,
-            inColGroup,
-            inFooterData,
-            inConfig
-        });
-
-        // Story 2: Build table structure specification from skeleton and fragments
-        const tableStructureSpec = buildTableStructureSpec({
-            inSkeletonType,
-            inSkeletonJson: skeletonJson,
-            inFragmentsJson: fragmentsJson,
-            inShowLog
-        });
-
-        // Story 3: Generate table DOM element from structure and data
-        const renderedTableElement = buildTableDomElement({
-            inStructureJson: tableStructureSpec,
-            inDataAsJson: tableDataAsJson,
-            inShowLog
-        });
-
-        // Story 4: Resolve target HTML container
-        const targetContainer = resolveTargetContainer({
-            inTargetHtmlId: localTargetHtmlId
-        });
-        if (!targetContainer) return;
-
-        // Story 5: Attach click event listener for child table rendering
-        attachTableClickEventListener({
-            inTargetContainer: targetContainer,
-            inData,
-            inColumns,
-            inRenderFunc: startFunc,
-            inTargetHtmlId: localTargetHtmlId
-        });
-
-        // Story 6: Append rendered table into target container
-        targetContainer.append(renderedTableElement);
-
-    } catch (error) {
-        console.log("error : ", error);
-    }
-};
-
-export default startFunc;