json-renderers 1.12.3 → 1.13.3

package/src/v5/table/resolveTargetContainer.js

@@ -1,9 +0,0 @@
-// Story 4: Resolve target HTML container element
-const startFunc = ({ inTargetHtmlId } = {}) => {
-    if (typeof inTargetHtmlId === "string") {
-        return document.getElementById(inTargetHtmlId);
-    }
-    return inTargetHtmlId ?? null;
-};
-
-export default startFunc;

package/src/v5/table/skeleton.json

@@ -1,371 +0,0 @@
-{
-    "tableSimple": {
-        "tagName": "table",
-        "attributes": {
-            "class": "table table-hover table-striped mb-0"
-        },
-        "slots": [
-            "colGroup",
-            "thead",
-            "tbody",
-            "tfoot"
-        ]
-    },
-    "bodyOnly": {
-        "tagName": "table",
-        "attributes": {
-            "class": "table table-hover table-striped mb-0"
-        },
-        "slots": [
-            "tbody"
-        ]
-    },
-    "default": {
-        "tagName": "div",
-        "attributes": {
-            "class": "card shadow-sm"
-        },
-        "children": [
-            {
-                "tagName": "div",
-                "attributes": {
-                    "class": "table-responsive"
-                },
-                "children": [
-                    {
-                        "tagName": "table",
-                        "attributes": {
-                            "class": "table table-hover table-striped mb-0"
-                        },
-                        "slots": [
-                            "colGroup",
-                            "thead",
-                            "tbody",
-                            "tfoot"
-                        ]
-                    }
-                ]
-            }
-        ]
-    },
-    "tableOnly": {
-        "tagName": "table",
-        "attributes": {
-            "class": "table table-hover table-striped mb-0"
-        },
-        "slots": [
-            "colGroup",
-            "thead",
-            "tbody",
-            "tfoot"
-        ]
-    },
-    "tableResponsive": {
-        "tagName": "div",
-        "attributes": {
-            "class": "table-responsive"
-        },
-        "children": [
-            {
-                "tagName": "table",
-                "attributes": {
-                    "class": "table table-hover table-striped mb-0"
-                },
-                "slots": [
-                    "colGroup",
-                    "thead",
-                    "tbody",
-                    "tfoot"
-                ]
-            }
-        ]
-    },
-    "cardWithHeader": {
-        "tagName": "div",
-        "attributes": {
-            "class": "card shadow-sm"
-        },
-        "children": [
-            {
-                "tagName": "div",
-                "attributes": {
-                    "class": "card-header bg-white py-3"
-                },
-                "slots": [
-                    "cardHeader"
-                ]
-            },
-            {
-                "tagName": "div",
-                "attributes": {
-                    "class": "table-responsive"
-                },
-                "children": [
-                    {
-                        "tagName": "table",
-                        "attributes": {
-                            "class": "table table-hover table-striped mb-0"
-                        },
-                        "slots": [
-                            "colGroup",
-                            "thead",
-                            "tbody",
-                            "tfoot"
-                        ]
-                    }
-                ]
-            }
-        ]
-    },
-    "cardWithFooter": {
-        "tagName": "div",
-        "attributes": {
-            "class": "card shadow-sm"
-        },
-        "children": [
-            {
-                "tagName": "div",
-                "attributes": {
-                    "class": "table-responsive"
-                },
-                "children": [
-                    {
-                        "tagName": "table",
-                        "attributes": {
-                            "class": "table table-hover table-striped mb-0"
-                        },
-                        "slots": [
-                            "colGroup",
-                            "thead",
-                            "tbody",
-                            "tfoot"
-                        ]
-                    }
-                ]
-            },
-            {
-                "tagName": "div",
-                "attributes": {
-                    "class": "card-footer bg-white py-2"
-                },
-                "slots": [
-                    "cardFooter"
-                ]
-            }
-        ]
-    },
-    "cardWithHeaderAndFooter": {
-        "tagName": "div",
-        "attributes": {
-            "class": "card shadow-sm"
-        },
-        "children": [
-            {
-                "tagName": "div",
-                "attributes": {
-                    "class": "card-header bg-white py-3"
-                },
-                "slots": [
-                    "cardHeader"
-                ]
-            },
-            {
-                "tagName": "div",
-                "attributes": {
-                    "class": "table-responsive"
-                },
-                "children": [
-                    {
-                        "tagName": "table",
-                        "attributes": {
-                            "class": "table table-hover table-striped mb-0"
-                        },
-                        "slots": [
-                            "colGroup",
-                            "thead",
-                            "tbody",
-                            "tfoot"
-                        ]
-                    }
-                ]
-            },
-            {
-                "tagName": "div",
-                "attributes": {
-                    "class": "card-footer bg-white py-2"
-                },
-                "slots": [
-                    "cardFooter"
-                ]
-            }
-        ]
-    },
-    "bordered": {
-        "tagName": "div",
-        "attributes": {
-            "class": "card shadow-sm"
-        },
-        "children": [
-            {
-                "tagName": "div",
-                "attributes": {
-                    "class": "table-responsive"
-                },
-                "children": [
-                    {
-                        "tagName": "table",
-                        "attributes": {
-                            "class": "table table-bordered table-hover mb-0"
-                        },
-                        "slots": [
-                            "colGroup",
-                            "thead",
-                            "tbody",
-                            "tfoot"
-                        ]
-                    }
-                ]
-            }
-        ]
-    },
-    "borderless": {
-        "tagName": "div",
-        "attributes": {
-            "class": "card shadow-sm"
-        },
-        "children": [
-            {
-                "tagName": "div",
-                "attributes": {
-                    "class": "table-responsive"
-                },
-                "children": [
-                    {
-                        "tagName": "table",
-                        "attributes": {
-                            "class": "table table-borderless table-hover mb-0"
-                        },
-                        "slots": [
-                            "colGroup",
-                            "thead",
-                            "tbody",
-                            "tfoot"
-                        ]
-                    }
-                ]
-            }
-        ]
-    },
-    "compact": {
-        "tagName": "div",
-        "attributes": {
-            "class": "card shadow-sm"
-        },
-        "children": [
-            {
-                "tagName": "div",
-                "attributes": {
-                    "class": "table-responsive"
-                },
-                "children": [
-                    {
-                        "tagName": "table",
-                        "attributes": {
-                            "class": "table table-sm table-hover table-striped mb-0"
-                        },
-                        "slots": [
-                            "colGroup",
-                            "thead",
-                            "tbody",
-                            "tfoot"
-                        ]
-                    }
-                ]
-            }
-        ]
-    },
-    "dark": {
-        "tagName": "div",
-        "attributes": {
-            "class": "card shadow-sm bg-dark text-white border-secondary"
-        },
-        "children": [
-            {
-                "tagName": "div",
-                "attributes": {
-                    "class": "table-responsive"
-                },
-                "children": [
-                    {
-                        "tagName": "table",
-                        "attributes": {
-                            "class": "table table-dark table-hover mb-0"
-                        },
-                        "slots": [
-                            "colGroup",
-                            "thead",
-                            "tbody",
-                            "tfoot"
-                        ]
-                    }
-                ]
-            }
-        ]
-    },
-    "striped": {
-        "tagName": "div",
-        "attributes": {
-            "class": "card shadow-sm"
-        },
-        "children": [
-            {
-                "tagName": "div",
-                "attributes": {
-                    "class": "table-responsive"
-                },
-                "children": [
-                    {
-                        "tagName": "table",
-                        "attributes": {
-                            "class": "table table-striped mb-0"
-                        },
-                        "slots": [
-                            "colGroup",
-                            "thead",
-                            "tbody",
-                            "tfoot"
-                        ]
-                    }
-                ]
-            }
-        ]
-    },
-    "flush": {
-        "tagName": "div",
-        "attributes": {
-            "class": "card border-0 shadow-none"
-        },
-        "children": [
-            {
-                "tagName": "div",
-                "attributes": {
-                    "class": "table-responsive"
-                },
-                "children": [
-                    {
-                        "tagName": "table",
-                        "attributes": {
-                            "class": "table table-hover table-striped mb-0"
-                        },
-                        "slots": [
-                            "colGroup",
-                            "thead",
-                            "tbody",
-                            "tfoot"
-                        ]
-                    }
-                ]
-            }
-        ]
-    }
-}

package/src/v6/dataLists/fragments.json

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

package/src/v6/dataLists/index.js

@@ -1,32 +0,0 @@
-// import jsonToSpec from "../../../node_modules/json-to-spec/index.js";
-import jsonToTag from "../../../node_modules/@keshavsoft/json-to-tag/index.js";
-import jsonTraversal from "../../../node_modules/json-traversal/index.js";
-
-import skeletonJson from "./skeleton.json" with { type: "json" };
-
-const startFunc = ({ targetHtmlId, inData, inSkeletonType = "default" } = {}) => {
-
-    // const specAsJsonToDom = jsonToSpec({
-    //     specJson: skeletonJson[inSkeletonType],
-    //     dataJson: inData
-    // });
-    const skeletonNeeded = skeletonJson[inSkeletonType];
-
-    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/v6/dataLists/skeleton.json

@@ -1,38 +0,0 @@
-{
-    "old": {
-        "tagName": "datalist",
-        "attributes": {
-            "id": "LedgerName"
-        },
-        "jsonToSpec": {
-            "operation": "loopArray",
-            "source": "LedgerName",
-            "template": {
-                "tagName": "option",
-                "attributes": {
-                    "value": "${}"
-                },
-                "textContent": "${}"
-            }
-        },
-        "children": []
-    },
-    "default": {
-        "mapping": {
-            "tagName": "$datalist",
-            "attributes": {
-                "id": "$LedgerName"
-            },
-            "children": {
-                "list": "LedgerName",
-                "item": {
-                    "tagName": "$option",
-                    "attributes": {
-                        "value": ""
-                    },
-                    "textContent": ""
-                }
-            }
-        }
-    }
-}

package/src/v6/form/attachFormClickEventListener.js

@@ -1,27 +0,0 @@
-import clickFunc from "./clickFunc/index.js";
-
-/**
- * Story: Attach click event listener for Form action buttons
- */
-const startFunc = ({
-    inTargetContainer,
-    onSave,
-    afterSave,
-    onNew,
-    onClear
-} = {}) => {
-    if (!inTargetContainer) return;
-
-    inTargetContainer.addEventListener("click", (event) => {
-        clickFunc({
-            inEvent: event,
-            inFormContainer: inTargetContainer,
-            onSave,
-            afterSave,
-            onNew,
-            onClear
-        });
-    });
-};
-
-export default startFunc;

package/src/v6/form/clickFunc/extractFormData.js

@@ -1,27 +0,0 @@
-/**
- * Step 1: Convert Form DOM inputs to clean JavaScript Object
- */
-const extractFormData = ({ inFormContainer } = {}) => {
-    if (!inFormContainer) return {};
-
-    const inputs = inFormContainer.querySelectorAll("input[name], select[name], textarea[name]");
-    const data = {};
-
-    inputs.forEach(input => {
-        const key = input.name || input.getAttribute("name");
-        if (!key) return;
-
-        if (input.type === "checkbox") {
-            data[key] = input.checked;
-        } else if (input.type === "radio") {
-            if (input.checked) data[key] = input.value;
-        } else {
-            data[key] = input.value;
-        }
-    });
-
-    return data;
-};
-
-export { extractFormData };
-export default extractFormData;

package/src/v6/form/clickFunc/handleNew.js

@@ -1,24 +0,0 @@
-/**
- * Step 3: Handle New / Clear button action - reset inputs and trigger callbacks
- */
-const handleNew = ({ inEvent, inFormContainer, onNew, onClear } = {}) => {
-    if (inFormContainer) {
-        const inputs = inFormContainer.querySelectorAll("input[name], textarea[name]");
-        inputs.forEach(input => {
-            if (input.type === "checkbox" || input.type === "radio") {
-                input.checked = false;
-            } else {
-                input.value = "";
-            }
-        });
-    }
-
-    if (typeof onNew === "function") {
-        onNew({ inEvent });
-    } else if (typeof onClear === "function") {
-        onClear({ inEvent });
-    }
-};
-
-export { handleNew };
-export default handleNew;

package/src/v6/form/clickFunc/handleSave.js

@@ -1,33 +0,0 @@
-import extractFormData from "./extractFormData.js";
-
-/**
- * Step 2: Handle Save button action - serialize form DOM and dispatch callbacks
- */
-const handleSave = ({ inEvent, inFormContainer, onSave, afterSave } = {}) => {
-    const clickedButton = inEvent?.target?.closest("button");
-    const formData = extractFormData({ inFormContainer });
-
-    // Visual button feedback
-    if (clickedButton) {
-        const originalText = clickedButton.textContent;
-        clickedButton.textContent = "Saved!";
-        clickedButton.classList.replace("btn-primary", "btn-success");
-        setTimeout(() => {
-            clickedButton.textContent = originalText;
-            clickedButton.classList.replace("btn-success", "btn-primary");
-        }, 1000);
-    }
-
-    if (typeof onSave === "function") {
-        onSave({ inData: formData, inEvent });
-    }
-
-    if (typeof afterSave === "function") {
-        afterSave({ inData: formData, inEvent });
-    }
-
-    return formData;
-};
-
-export { handleSave };
-export default handleSave;

package/src/v6/form/clickFunc/index.js

@@ -1,32 +0,0 @@
-import handleSave from "./handleSave.js";
-import handleNew from "./handleNew.js";
-
-/**
- * Main form click router: identifies button action and routes to dedicated handlers
- */
-const clickFunc = ({
-    inEvent,
-    inFormContainer,
-    onSave,
-    afterSave,
-    onNew,
-    onClear
-} = {}) => {
-    const clickedButton = inEvent?.target?.closest("button");
-    if (!clickedButton) return;
-
-    const buttonId = clickedButton.id || "";
-    const buttonAction = clickedButton.dataset.action || "";
-    const buttonText = clickedButton.textContent.trim().toLowerCase();
-
-    if (buttonId === "btn-form-save" || buttonAction === "save" || buttonText === "save") {
-        return handleSave({ inEvent, inFormContainer, onSave, afterSave });
-    }
-
-    if (buttonId === "btn-form-new" || buttonAction === "new" || buttonText === "new" || buttonText === "clear") {
-        return handleNew({ inEvent, inFormContainer, onNew, onClear });
-    }
-};
-
-export { clickFunc };
-export default clickFunc;

package/src/v6/form/index.js

@@ -1,87 +0,0 @@
-import jsonToSpec from "../../../jsonToSpec/v2/index.js";
-import jsonToTag from "../../../jsonToTag/v2/index.js";
-import attachFormClickEventListener from "./attachFormClickEventListener.js";
-
-import structureJson from './structure.json' with {type: 'json'};
-
-const startFunc = ({
-    targetHtmlId,
-    inTargetHtmlId,
-    inFields = [],
-    inData = {},
-    inColumns = [],
-    inVariant = "stacked",
-    inSkeletonType,
-    inShowLog = false,
-    onSave,
-    afterSave,
-    onNew,
-    onClear
-} = {}) => {
-    const localTargetHtmlId = inTargetHtmlId ?? targetHtmlId;
-    const localVariant = inSkeletonType ?? inVariant;
-    const localShowLog = inShowLog;
-
-    try {
-        let fieldsArray = [];
-
-        if (Array.isArray(inFields) && inFields.length > 0) {
-            fieldsArray = inFields;
-        } else if (Array.isArray(inColumns) && inColumns.length > 0) {
-            fieldsArray = inColumns.map((col) => ({
-                key: col.field ?? col.name ?? col.key,
-                label: col.title ?? col.label ?? col.field ?? col.name,
-                type: col.type ?? "text",
-                value: inData?.[col.field ?? col.name ?? col.key] ?? col.value ?? "",
-                readonly: col.readonly ? "true" : "",
-                disabled: col.disabled ? "true" : ""
-            }));
-        } else if (typeof inData === "object" && inData !== null && !Array.isArray(inData)) {
-            fieldsArray = Object.entries(inData).map(([key, value]) => ({
-                key,
-                label: key,
-                type: "text",
-                value: value ?? "",
-                readonly: "",
-                disabled: ""
-            }));
-        }
-
-        const dataAsJson = { fields: fieldsArray };
-
-        const rawStructure = structureJson[localVariant] ?? structureJson.stacked ?? structureJson;
-        const targetStructure = structuredClone(rawStructure);
-
-        if (localShowLog) console.log("form targetStructure : ", targetStructure);
-
-        const specAsJsonToDom = jsonToSpec({ specJson: targetStructure, dataJson: dataAsJson, showLog: false });
-        if (localShowLog) console.log("form specAsJsonToDom : ", specAsJsonToDom);
-
-        const fromRenderer = jsonToTag(specAsJsonToDom);
-
-        const html = (typeof localTargetHtmlId === "string")
-            ? document.getElementById(localTargetHtmlId)
-            : localTargetHtmlId;
-
-        const containerToAttach = html || fromRenderer;
-
-        // Attach modular click event listener for Save and New actions
-        attachFormClickEventListener({
-            inTargetContainer: containerToAttach,
-            onSave,
-            afterSave,
-            onNew,
-            onClear
-        });
-
-        if (!html) return fromRenderer;
-
-        html.append(fromRenderer);
-        return fromRenderer;
-    } catch (error) {
-        console.log("error : ", error);
-    }
-};
-
-export { startFunc };
-export default startFunc;