json-renderers 1.9.1

package/src/v5/form/structure.json

@@ -0,0 +1,410 @@
+{
+    "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

@@ -0,0 +1,150 @@
+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

@@ -0,0 +1,6 @@
+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;

package/src/v5/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": []
+    }
+}