json-renderers 1.12.2 → 1.13.2

package/src/v5/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;

package/src/v5/form/structure.json

@@ -1,410 +0,0 @@
-{
-    "stacked": {
-        "tagName": "div",
-        "attributes": {
-            "class": "card shadow-sm"
-        },
-        "children": [
-            {
-                "tagName": "div",
-                "attributes": {
-                    "class": "card-header fw-semibold"
-                },
-                "children": [
-                    {
-                        "tagName": "span",
-                        "textContent": "Ledger Details"
-                    }
-                ]
-            },
-            {
-                "tagName": "div",
-                "attributes": {
-                    "class": "card-body"
-                },
-                "jsonToSpec": {
-                    "operation": "loopArray",
-                    "source": "fields",
-                    "template": {
-                        "tagName": "div",
-                        "attributes": {
-                            "class": "mb-3"
-                        },
-                        "children": [
-                            {
-                                "tagName": "label",
-                                "attributes": {
-                                    "class": "form-label"
-                                },
-                                "textContent": "${label}"
-                            },
-                            {
-                                "tagName": "input",
-                                "attributes": {
-                                    "type": "${type}",
-                                    "class": "form-control",
-                                    "value": "${value}",
-                                    "name": "${key}",
-                                    "readonly": "${readonly}",
-                                    "disabled": "${disabled}"
-                                }
-                            }
-                        ]
-                    }
-                },
-                "jsonToSpec1": {
-                    "operation": "iterate",
-                    "source": "fields",
-                    "template": {
-                        "tagName": "div",
-                        "attributes": {
-                            "class": "mb-3"
-                        },
-                        "children": [
-                            {
-                                "tagName": "label",
-                                "attributes": {
-                                    "class": "form-label"
-                                },
-                                "textContent": "${label}"
-                            },
-                            {
-                                "tagName": "input",
-                                "attributes": {
-                                    "type": "text",
-                                    "class": "form-control",
-                                    "value": "${value}",
-                                    "readonly": "true"
-                                }
-                            }
-                        ]
-                    }
-                },
-                "children": []
-            }
-        ]
-    },
-    "stackedWithButtons": {
-        "tagName": "div",
-        "attributes": {
-            "class": "card shadow-sm"
-        },
-        "children": [
-            {
-                "tagName": "div",
-                "attributes": {
-                    "class": "card-header fw-semibold"
-                },
-                "children": [
-                    {
-                        "tagName": "span",
-                        "textContent": "Ledger Details"
-                    }
-                ]
-            },
-            {
-                "tagName": "div",
-                "attributes": {
-                    "class": "card-body"
-                },
-                "jsonToSpec": {
-                    "operation": "loopArray",
-                    "source": "fields",
-                    "template": {
-                        "tagName": "div",
-                        "attributes": {
-                            "class": "mb-3"
-                        },
-                        "children": [
-                            {
-                                "tagName": "label",
-                                "attributes": {
-                                    "class": "form-label"
-                                },
-                                "textContent": "${label}"
-                            },
-                            {
-                                "tagName": "input",
-                                "attributes": {
-                                    "type": "${type}",
-                                    "class": "form-control",
-                                    "value": "${value}",
-                                    "name": "${key}",
-                                    "readonly": "${readonly}",
-                                    "disabled": "${disabled}"
-                                }
-                            }
-                        ]
-                    }
-                },
-                "children": []
-            },
-            {
-                "tagName": "div",
-                "attributes": {
-                    "class": "card-footer bg-white border-top-0 d-flex justify-content-end gap-2 pt-0 pb-3"
-                },
-                "children": [
-                    {
-                        "tagName": "button",
-                        "attributes": {
-                            "type": "button",
-                            "class": "btn btn-outline-secondary btn-sm",
-                            "id": "btn-form-new"
-                        },
-                        "textContent": "New"
-                    },
-                    {
-                        "tagName": "button",
-                        "attributes": {
-                            "type": "button",
-                            "class": "btn btn-primary btn-sm",
-                            "id": "btn-form-save"
-                        },
-                        "textContent": "Save"
-                    }
-                ]
-            }
-        ]
-    },
-    "inline": {
-        "tagName": "div",
-        "attributes": {
-            "class": "card shadow-sm"
-        },
-        "children": [
-            {
-                "tagName": "div",
-                "attributes": {
-                    "class": "card-header fw-semibold"
-                },
-                "children": [
-                    {
-                        "tagName": "span",
-                        "textContent": "Ledger Details"
-                    }
-                ]
-            },
-            {
-                "tagName": "div",
-                "attributes": {
-                    "class": "card-body"
-                },
-                "jsonToSpec": {
-                    "operation": "loopArray",
-                    "source": "fields",
-                    "template": {
-                        "tagName": "div",
-                        "attributes": {
-                            "class": "row mb-2 align-items-center"
-                        },
-                        "children": [
-                            {
-                                "tagName": "label",
-                                "attributes": {
-                                    "class": "col-sm-4 col-form-label text-sm-end mb-0 fw-semibold text-secondary small"
-                                },
-                                "textContent": "${label}"
-                            },
-                            {
-                                "tagName": "div",
-                                "attributes": {
-                                    "class": "col-sm-8"
-                                },
-                                "children": [
-                                    {
-                                        "tagName": "input",
-                                        "attributes": {
-                                            "class": "form-control",
-                                            "name": "${key}",
-                                            "value": "${value}",
-                                            "list": "${list}",
-                                            "type": "${type}"
-                                        }
-                                    }
-                                ]
-                            }
-                        ]
-                    }
-                },
-                "jsonToSpec1": {
-                    "operation": "iterate",
-                    "source": "fields",
-                    "template": {
-                        "tagName": "div",
-                        "attributes": {
-                            "class": "row mb-2 align-items-center"
-                        },
-                        "children": [
-                            {
-                                "tagName": "label",
-                                "attributes": {
-                                    "class": "col-4 col-form-label fw-medium text-end"
-                                },
-                                "textContent": "${label}"
-                            },
-                            {
-                                "tagName": "div",
-                                "attributes": {
-                                    "class": "col-8"
-                                },
-                                "children": [
-                                    {
-                                        "tagName": "input",
-                                        "attributes": {
-                                            "type": "text",
-                                            "class": "form-control form-control-sm",
-                                            "value": "${value}",
-                                            "list": "${list}"
-                                        }
-                                    }
-                                ]
-                            }
-                        ]
-                    }
-                },
-                "children": []
-            }
-        ]
-    },
-    "inlineWithButtons": {
-        "tagName": "div",
-        "attributes": {
-            "class": "card shadow-sm"
-        },
-        "children": [
-            {
-                "tagName": "div",
-                "attributes": {
-                    "class": "card-header fw-semibold"
-                },
-                "children": [
-                    {
-                        "tagName": "span",
-                        "textContent": "Ledger Details"
-                    }
-                ]
-            },
-            {
-                "tagName": "div",
-                "attributes": {
-                    "class": "card-body"
-                },
-                "jsonToSpec": {
-                    "operation": "iterate",
-                    "source": "fields",
-                    "template": {
-                        "tagName": "div",
-                        "attributes": {
-                            "class": "row mb-2 align-items-center"
-                        },
-                        "children": [
-                            {
-                                "tagName": "label",
-                                "attributes": {
-                                    "class": "col-4 col-form-label fw-medium text-end"
-                                },
-                                "textContent": "${label}"
-                            },
-                            {
-                                "tagName": "div",
-                                "attributes": {
-                                    "class": "col-6"
-                                },
-                                "children": [
-                                    {
-                                        "tagName": "input",
-                                        "attributes": {
-                                            "type": "text",
-                                            "class": "form-control form-control-sm",
-                                            "value": "${value}",
-                                            "readonly": "true"
-                                        }
-                                    }
-                                ]
-                            },
-                            {
-                                "tagName": "div",
-                                "attributes": {
-                                    "class": "col-2 d-flex gap-1"
-                                },
-                                "children": [
-                                    {
-                                        "tagName": "button",
-                                        "attributes": {
-                                            "type": "button",
-                                            "class": "btn btn-sm btn-outline-primary"
-                                        },
-                                        "textContent": "Edit"
-                                    },
-                                    {
-                                        "tagName": "button",
-                                        "attributes": {
-                                            "type": "button",
-                                            "class": "btn btn-sm btn-outline-secondary"
-                                        },
-                                        "textContent": "Copy"
-                                    }
-                                ]
-                            }
-                        ]
-                    }
-                },
-                "children": []
-            }
-        ]
-    },
-    "list": {
-        "tagName": "div",
-        "attributes": {
-            "class": "card shadow-sm"
-        },
-        "children": [
-            {
-                "tagName": "div",
-                "attributes": {
-                    "class": "card-header fw-semibold"
-                },
-                "children": [
-                    {
-                        "tagName": "span",
-                        "textContent": "Ledger Details"
-                    }
-                ]
-            },
-            {
-                "tagName": "ul",
-                "attributes": {
-                    "class": "list-group list-group-flush"
-                },
-                "jsonToSpec": {
-                    "operation": "iterate",
-                    "source": "fields",
-                    "template": {
-                        "tagName": "li",
-                        "attributes": {
-                            "class": "list-group-item d-flex justify-content-between align-items-center"
-                        },
-                        "children": [
-                            {
-                                "tagName": "span",
-                                "attributes": {
-                                    "class": "text-muted"
-                                },
-                                "textContent": "${label}"
-                            },
-                            {
-                                "tagName": "span",
-                                "attributes": {
-                                    "class": "fw-medium"
-                                },
-                                "textContent": "${value}"
-                            }
-                        ]
-                    }
-                },
-                "children": []
-            }
-        ]
-    }
-}

package/src/v5/index.js

@@ -1,150 +0,0 @@
-import registerGlobal from "./registerGlobal.js";
-
-// import renderTable from "./table/index.js";
-// import renderNavTabs from "./navTabs/index.js";
-// import renderForm from "./form/index.js";
-
-import renderDataList from "./dataLists/index.js";
-import renderSelect from "./select/index.js";
-
-// const RENDERER_MAP = {
-//     table: renderTable,
-//     navtabs: renderNavTabs,
-//     nav: renderNavTabs,
-//     tabs: renderNavTabs,
-//     form: renderForm,
-//     datalist: renderDataList,
-//     "data-list": renderDataList
-// };
-
-const RENDERER_MAP = {
-    datalist: renderDataList,
-    select: renderSelect
-};
-
-
-/**
- * Unified Renderer
- * Dispatches to the corresponding renderer strategy (table, navTabs, form)
- * based on the provided type.
- */
-
-// render({ type: "select", data, targetHtmlId: "dom-render-container" });
-
-const render = ({
-    type = "table",
-    targetHtmlId,
-    data,
-    classToApply,
-    inTargetHtmlId,
-    inData,
-    columns,
-    inColumns,
-    fields,
-    inFields,
-    tabs,
-    inTabs,
-    options,
-    inOptions,
-    datalistId,
-    inDatalistId,
-    listId,
-    inListId,
-    id,
-    valueField,
-    inValueField,
-    labelField,
-    inLabelField,
-    colGroup,
-    inColGroup,
-    footerData,
-    inFooterData,
-    config,
-    inConfig,
-    variant,
-    skeletonType,
-    inSkeletonType,
-    showLog = false,
-    inShowLog,
-    ...restProps
-} = {}) => {
-    const rawType = type;
-    const resolvedType = typeof rawType === "string" ? rawType.toLowerCase() : "table";
-    const renderer = RENDERER_MAP[resolvedType];
-
-    if (!renderer) {
-        console.error(
-            `[Renderer] Unknown renderer type "${rawType}". Available types: ${Object.keys(RENDERER_MAP).join(", ")}`
-        );
-        return null;
-    }
-
-    const localTargetHtmlId = inTargetHtmlId ?? targetHtmlId;
-    const localData = inData ?? data;
-    const localColumns = inColumns ?? columns;
-    const localFields = inFields ?? fields;
-    const localTabs = inTabs ?? tabs;
-    const localOptions = inOptions ?? options ?? localData;
-    const localSkeletonType = inSkeletonType ?? skeletonType ?? variant ?? "default";
-    const localShowLog = inShowLog ?? showLog ?? false;
-
-    if (resolvedType === "form") {
-        return renderer({
-            targetHtmlId: localTargetHtmlId,
-            inFields: localFields,
-            inData: localData,
-            inColumns: localColumns,
-            inVariant: localSkeletonType,
-            inSkeletonType: localSkeletonType,
-            inShowLog: localShowLog,
-            onSave: restProps?.onSave,
-            afterSave: restProps?.afterSave,
-            onNew: restProps?.onNew
-        });
-    }
-
-    if (resolvedType === "navtabs" || resolvedType === "nav" || resolvedType === "tabs") {
-        return renderer({
-            targetHtmlId: localTargetHtmlId,
-            inTabs: localTabs,
-            inData: localData,
-            inSkeletonType: localSkeletonType,
-            inShowLog: localShowLog
-        });
-    }
-
-    if (resolvedType === "datalist" || resolvedType === "data-list") {
-        return renderer({
-            targetHtmlId: localTargetHtmlId,
-            inData: localData,
-            inSkeletonType: localSkeletonType,
-            inShowLog: localShowLog
-        });
-    }
-
-    if (resolvedType === "select") {
-        return renderer({
-            targetHtmlId: localTargetHtmlId,
-            inData: localData,
-            inSkeletonType: localSkeletonType,
-            inShowLog: localShowLog,
-            inClassToApply: classToApply
-        });
-    };
-
-    // Default to table renderer
-    return renderer({
-        targetHtmlId: localTargetHtmlId,
-        inColumns: localColumns,
-        inData: localData,
-        inColGroup: inColGroup ?? colGroup,
-        inFooterData: inFooterData ?? footerData ?? [],
-        inConfig: inConfig ?? config ?? {},
-        inSkeletonType: localSkeletonType,
-        inShowLog: localShowLog
-    });
-};
-
-registerGlobal(render);
-
-export default render;

package/src/v5/meta.js

@@ -1,6 +0,0 @@
-export const meta = {
-    version: "v4.0.0",
-    description: "build table from store data and render to DOM uses json-to-spec, json-to-dom under the hood"
-};
-
-export default meta;