json-renderers 1.9.1

package/src/v9/navTabs/fragments.json

@@ -0,0 +1,59 @@
+{
+    "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/v9/navTabs/index.js

@@ -0,0 +1,82 @@
+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/v9/navTabs/skeleton.json

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

package/src/v9/registerGlobal.js

@@ -0,0 +1,14 @@
+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/v9/select/fragments.json

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

package/src/v9/select/index.js

@@ -0,0 +1,34 @@
+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/v9/select/skeleton.json

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

package/src/v9/table/index.js

@@ -0,0 +1,35 @@
+import jsonToSpec from "json-to-spec";
+import jsonToTag from "@keshavsoft/json-to-tag";
+
+import skeletonJson from './skeleton.json' with { type: 'json' };
+
+// --- Story of Table Render ---
+const startFunc = ({
+    targetHtmlId,
+    inTargetHtmlId,
+    inColumns,
+    inData,
+} = {}) => {
+    const localTargetHtmlId = inTargetHtmlId ?? targetHtmlId;
+    const localData = inData ?? [];
+    const localColumns = inColumns;
+
+    let specAsJsonToDom = jsonToSpec(skeletonJson.default, {
+        columns: localColumns, data: localData
+    });
+
+    // console.log("specAsJsonToDom : ", specAsJsonToDom);
+
+    if (!("tagName" in specAsJsonToDom)) {
+        specAsJsonToDom = specAsJsonToDom.children;
+    };
+
+    const container = document.getElementById(localTargetHtmlId);
+
+    if (container) container.innerHTML = "";
+
+    const content = jsonToTag(specAsJsonToDom);
+    container.append(content);
+};
+
+export default startFunc;

package/src/v9/table/skeleton.json

@@ -0,0 +1,47 @@
+{
+    "default": {
+        "tagName": "table",
+        "attributes": {
+            "class": "table table-hover table-striped mb-0"
+        },
+        "children": [
+            {
+                "tagName": "thead",
+                "children": [
+                    {
+                        "tagName": "tr",
+                        "jsonToSpec": {
+                            "operation": "loopCollection",
+                            "source": "columns",
+                            "template": {
+                                "tagName": "th",
+                                "textContent": "${title}"
+                            }
+                        },
+                        "children": []
+                    }
+                ]
+            },
+            {
+                "tagName": "tbody",
+                "jsonToSpec": {
+                    "operation": "loopCollection",
+                    "source": "data",
+                    "template": {
+                        "tagName": "tr",
+                        "jsonToSpec": {
+                            "operation": "loopObject",
+                            "source": "data",
+                            "template": {
+                                "tagName": "td",
+                                "textContent": "${value}"
+                            }
+                        },
+                        "children": []
+                    }
+                },
+                "children": []
+            }
+        ]
+    }
+}