json-renderers 1.12.2 → 1.13.2

package/src/v8/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/v8/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/v8/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/v8/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/v8/select/fragments.json

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

package/src/v8/select/index.js

@@ -1,34 +0,0 @@
-import jsonTraversal from "../../../node_modules/json-traversal/index.js";
-
-// import jsonToSpec from "../../../node_modules/json-to-spec/index.js";
-// import jsonToTag from "@keshavsoft/json-to-tag";
-import jsonToTag from "@keshavsoft/json-to-tag";
-
-import skeletonJson from "./skeleton.json" with { type: "json" };
-
-const startFunc = ({ targetHtmlId, inData,
-    inSkeletonType = "default", inClassToApply } = {}) => {
-
-    console.log("aaaaaaaaaa");
-
-    const skeletonNeeded = skeletonJson[inSkeletonType];
-    skeletonNeeded.mapping.attributes.class = `$${inClassToApply}`;
-    // skeletonNeeded.mapping.attributes.class = inClassToApply;
-    debugger;
-
-    const specAsJsonToDom = jsonTraversal.transform(inData, skeletonNeeded);
-
-    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/v8/select/skeleton.json

@@ -1,23 +0,0 @@
-{
-    "default": {
-        "mapping": {
-            "tagName": "$select",
-            "attributes": {
-                "id": "$LedgerName",
-                "class": "$keshav"
-            },
-            "children": [
-                {
-                    "list": "LedgerName",
-                    "item": {
-                        "tagName": "$option",
-                        "attributes": {
-                            "value": ""
-                        },
-                        "textContent": ""
-                    }
-                }
-            ]
-        }
-    }
-}

package/src/v8/table/attachTableClickEventListener.js

@@ -1,28 +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
-} = {}) => {
-    const localTargetContainer = inTargetContainer;
-    const localData = inData;
-    const localColumns = inColumns;
-    const localRenderFunc = inRenderFunc;
-    const localTargetHtmlId = inTargetHtmlId;
-
-    localTargetContainer.addEventListener('click', (event) => {
-        clickFunc({
-            inEvent: event,
-            inData: localData,
-            inColumns: localColumns,
-            inRenderFunc: localRenderFunc,
-            inTargetHtmlId: localTargetHtmlId
-        });
-    });
-};
-
-export default startFunc;

package/src/v8/table/buildTableDataAsJson.js

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

package/src/v8/table/buildTableDomElement.js

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

package/src/v8/table/buildTableStructureSpec.js

@@ -1,33 +0,0 @@
-import skeletonToSpec from "../../../skeletonToSpec/v1/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 localSkeletonType = inSkeletonType;
-    const localSkeletonJson = inSkeletonJson;
-    const localFragmentsJson = inFragmentsJson;
-    const localShowLog = inShowLog;
-
-    const rawSkeleton = localSkeletonJson[localSkeletonType] ?? localSkeletonJson.default ?? localSkeletonJson;
-    const targetSkeleton = structuredClone(rawSkeleton);
-
-    if (localShowLog) console.log("targetSkeleton : ", targetSkeleton);
-
-    const structureJson = skeletonToSpec({
-        inSkeleton: targetSkeleton,
-        inFragments: localFragmentsJson
-    });
-
-    if (localShowLog) console.log("structureJson : ", structureJson);
-
-    return structureJson;
-};
-
-export default startFunc;

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

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

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

@@ -1,27 +0,0 @@
-// Step 1: Who clicked what? (Resolve parent row, column key, and child table data)
-const startFunc = ({ inEvent, inColumns, inData } = {}) => {
-    const localEvent = inEvent;
-    const localColumns = inColumns;
-    const localData = inData;
-
-    const clickedButton = localEvent?.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 = localColumns?.[parentCell.cellIndex]?.key;
-    const childTableData = localData?.[parentRowIndex]?.[childColumnKey];
-
-    if (!Array.isArray(childTableData) || childTableData.length === 0) return null;
-
-    return {
-        parentRowIndex,
-        childColumnKey,
-        childTableData
-    };
-};
-
-export default startFunc;

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

@@ -1,24 +0,0 @@
-// Step 2: Where does the child table live? (Find or create the container div)
-const startFunc = ({ inTargetHtmlId, inChildColumnKey } = {}) => {
-    const localTargetHtmlId = inTargetHtmlId;
-    const localChildColumnKey = inChildColumnKey;
-
-    const targetTableElement = (typeof localTargetHtmlId === "string")
-        ? document.getElementById(localTargetHtmlId)
-        : localTargetHtmlId;
-    if (!targetTableElement) return null;
-
-    const childContainerHtmlId = `${targetTableElement.id || "table"}-${localChildColumnKey}`;
-    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/v8/table/clickFunc/v3/getContainer/index.js

@@ -1,44 +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 } = {}) => {
-    const localEvent = inEvent;
-    const localTargetHtmlId = inTargetHtmlId;
-    const localColumns = inColumns;
-    const localData = inData;
-
-    // Story 1: Who was clicked? (Resolve parent row and child table data)
-    const clickedRowDetails = extractClickedRowDetails({
-        inEvent: localEvent,
-        inColumns: localColumns,
-        inData: localData
-    });
-    if (!clickedRowDetails) return null;
-
-    // Story 2: Where does the child table container go?
-    const childTableContainer = getOrCreateChildTableContainer({
-        inTargetHtmlId: localTargetHtmlId,
-        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/v8/table/clickFunc/v3/getContainer/isSameRowClickedToToggleOff.js

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

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

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

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

@@ -1,35 +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
-} = {}) => {
-    const localEvent = inEvent;
-    const localData = inData;
-    const localColumns = inColumns;
-    const localRenderFunc = inRenderFunc;
-    const localTargetHtmlId = inTargetHtmlId;
-
-    // 1. Get or prepare child table container
-    const childTableContainer = getContainer({
-        inEvent: localEvent,
-        inTargetHtmlId: localTargetHtmlId,
-        inColumns: localColumns,
-        inData: localData
-    });
-    if (!childTableContainer) return;
-
-    // 2. Create and render child table inside the container
-    createTable({
-        inChildTableContainer: childTableContainer,
-        inRenderFunc: localRenderFunc
-    });
-};
-
-export { clickFunc };
-export default clickFunc;

package/src/v8/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}"
-            }
-        ]
-    }
-}