json-renderers 1.12.2 → 1.13.2

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

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