json-to-spec 19.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (217) hide show
  1. package/README.md +118 -0
  2. package/docs/demo.html +426 -0
  3. package/docs/dist/min.js +164 -0
  4. package/docs/dist/v1/min.js +124 -0
  5. package/docs/dist/v17/min.js +355 -0
  6. package/docs/dist/v18/min.js +160 -0
  7. package/docs/dist/v19/min.js +164 -0
  8. package/docs/dist/v2/min.js +129 -0
  9. package/docs/dist/v3/min.js +201 -0
  10. package/docs/index.html +248 -0
  11. package/docs/pages/architecture.html +115 -0
  12. package/docs/pages/how-it-works.html +125 -0
  13. package/docs/pages/what-not.html +100 -0
  14. package/docs/pages/what.html +105 -0
  15. package/docs/pages/why.html +88 -0
  16. package/docs/samples/form.html +265 -0
  17. package/docs/samples/index.html +112 -0
  18. package/docs/samples/table.html +306 -0
  19. package/index.js +2 -0
  20. package/package.json +50 -0
  21. package/samples/dataList/index.html +31 -0
  22. package/samples/dataList/index.js +62 -0
  23. package/samples/dataList/input/data.json +5043 -0
  24. package/samples/dataList/input/structure.json +38 -0
  25. package/samples/dataList copy/index.html +30 -0
  26. package/samples/dataList copy/index.js +61 -0
  27. package/samples/dataList copy/input/data.json +35307 -0
  28. package/samples/dataList copy/input/structure.json +18 -0
  29. package/samples/form/index.html +29 -0
  30. package/samples/form/index.js +64 -0
  31. package/samples/form/input/data.json +9 -0
  32. package/samples/form/input/structure.json +192 -0
  33. package/samples/form-/data.json +42 -0
  34. package/samples/form-/structure.json +110 -0
  35. package/samples/select/index.html +31 -0
  36. package/samples/select/index.js +61 -0
  37. package/samples/select/input/data.json +35287 -0
  38. package/samples/select/input/select.json +18 -0
  39. package/samples/select/input/structure.json +47 -0
  40. package/samples/table/index.html +29 -0
  41. package/samples/table/index.js +61 -0
  42. package/samples/table/input/data.json +35287 -0
  43. package/samples/table/input/structure copy.json +47 -0
  44. package/samples/table/input/structure.json +86 -0
  45. package/samples/table/input/table.json +135 -0
  46. package/samples/table-/data.json +68 -0
  47. package/samples/table-/structure.json +235 -0
  48. package/src/index.js +2 -0
  49. package/src/v10/index.js +96 -0
  50. package/src/v10/instructionEngine/compile/compileTree.js +191 -0
  51. package/src/v10/instructionEngine/compileTree.js +1 -0
  52. package/src/v10/instructionEngine/expandIteration.js +1 -0
  53. package/src/v10/instructionEngine/index.js +29 -0
  54. package/src/v10/instructionEngine/interpolate.js +2 -0
  55. package/src/v10/instructionEngine/iteration/expandIteration.js +95 -0
  56. package/src/v10/instructionEngine/operation/operation.js +237 -0
  57. package/src/v10/instructionEngine/other/other.js +150 -0
  58. package/src/v10/instructionEngine/pipeline/pipeline.js +47 -0
  59. package/src/v10/instructionEngine/replace/replace.js +173 -0
  60. package/src/v10/instructionEngine/resolve/resolvePath.js +18 -0
  61. package/src/v10/instructionEngine/resolve/resolveTokenValue.js +22 -0
  62. package/src/v10/instructionEngine/resolvePath.js +1 -0
  63. package/src/v10/instructionEngine/resolveTokenValue.js +1 -0
  64. package/src/v10/instructionEngine/story/storyInjector.js +50 -0
  65. package/src/v10/instructionEngine/storyInjector.js +1 -0
  66. package/src/v10/instructionEngine/value/interpolate.js +38 -0
  67. package/src/v11/index.js +116 -0
  68. package/src/v11/iterate.js +270 -0
  69. package/src/v11/replace.js +169 -0
  70. package/src/v11/resolvePath.js +29 -0
  71. package/src/v12/index.js +122 -0
  72. package/src/v12/iterate/bindFormValues.js +74 -0
  73. package/src/v12/iterate/expandIteration.js +181 -0
  74. package/src/v12/iterate/index.js +10 -0
  75. package/src/v12/iterate/iterate.js +56 -0
  76. package/src/v12/iterate/iterateNode.js +86 -0
  77. package/src/v12/iterate/resolveCollection.js +37 -0
  78. package/src/v12/iterate.js +270 -0
  79. package/src/v12/replace.js +169 -0
  80. package/src/v12/resolvePath.js +29 -0
  81. package/src/v13/index.js +110 -0
  82. package/src/v13/iterate/bindFormValues.js +74 -0
  83. package/src/v13/iterate/expandIteration.js +188 -0
  84. package/src/v13/iterate/index.js +9 -0
  85. package/src/v13/iterate/iterate.js +32 -0
  86. package/src/v13/iterate/iterateNode.js +86 -0
  87. package/src/v13/iterate/resolveCollection.js +37 -0
  88. package/src/v13/iterate/walk.js +90 -0
  89. package/src/v13/iterate.js +270 -0
  90. package/src/v13/replace.js +169 -0
  91. package/src/v13/resolvePath.js +29 -0
  92. package/src/v14/index.js +112 -0
  93. package/src/v14/iterate/bindFormValues.js +74 -0
  94. package/src/v14/iterate/expandIteration.js +188 -0
  95. package/src/v14/iterate/index.js +9 -0
  96. package/src/v14/iterate/iterate.js +32 -0
  97. package/src/v14/iterate/resolveCollection.js +37 -0
  98. package/src/v14/iterate/walk/walk copy 2.js +114 -0
  99. package/src/v14/iterate/walk/walk copy.js +90 -0
  100. package/src/v14/iterate/walk/walk.js +98 -0
  101. package/src/v14/iterate.js +270 -0
  102. package/src/v14/replace/index.js +16 -0
  103. package/src/v14/replace/walk.js +90 -0
  104. package/src/v14/replace.js +153 -0
  105. package/src/v14/resolvePath.js +29 -0
  106. package/src/v15/index.js +123 -0
  107. package/src/v15/iterate/bindFormValues.js +74 -0
  108. package/src/v15/iterate/expandIteration.js +188 -0
  109. package/src/v15/iterate/index.js +9 -0
  110. package/src/v15/iterate/iterate.js +32 -0
  111. package/src/v15/iterate/resolveCollection.js +37 -0
  112. package/src/v15/iterate/walk/walk copy 2.js +114 -0
  113. package/src/v15/iterate/walk/walk copy.js +90 -0
  114. package/src/v15/iterate/walk/walk.js +195 -0
  115. package/src/v15/iterate.js +270 -0
  116. package/src/v15/replace/index.js +16 -0
  117. package/src/v15/replace/walk.js +90 -0
  118. package/src/v15/replace.js +155 -0
  119. package/src/v15/resolvePath.js +29 -0
  120. package/src/v16/index.js +129 -0
  121. package/src/v16/iterate/bindFormValues.js +74 -0
  122. package/src/v16/iterate/expandIteration.js +188 -0
  123. package/src/v16/iterate/index.js +9 -0
  124. package/src/v16/iterate/iterate.js +32 -0
  125. package/src/v16/iterate/resolveCollection.js +37 -0
  126. package/src/v16/iterate/walk/walk copy 2.js +114 -0
  127. package/src/v16/iterate/walk/walk copy.js +90 -0
  128. package/src/v16/iterate/walk/walk.js +196 -0
  129. package/src/v16/iterate.js +270 -0
  130. package/src/v16/replace/index.js +16 -0
  131. package/src/v16/replace/walk.js +90 -0
  132. package/src/v16/replace.js +155 -0
  133. package/src/v16/resolvePath.js +29 -0
  134. package/src/v17/index.js +119 -0
  135. package/src/v17/iterate/bindFormValues.js +74 -0
  136. package/src/v17/iterate/expandIteration.js +188 -0
  137. package/src/v17/iterate/index.js +9 -0
  138. package/src/v17/iterate/iterate.js +32 -0
  139. package/src/v17/iterate/resolveCollection.js +37 -0
  140. package/src/v17/iterate/walk/iterateDo.js +42 -0
  141. package/src/v17/iterate/walk/replaceWithData.js +60 -0
  142. package/src/v17/iterate/walk/walk.js +94 -0
  143. package/src/v17/iterate.js +270 -0
  144. package/src/v17/replace/index.js +16 -0
  145. package/src/v17/replace/walk.js +90 -0
  146. package/src/v17/replace.js +160 -0
  147. package/src/v17/resolvePath.js +29 -0
  148. package/src/v18/index.js +66 -0
  149. package/src/v18/meta.js +7 -0
  150. package/src/v18/registerGlobal.js +17 -0
  151. package/src/v18/replace.js +18 -0
  152. package/src/v18/resolvePath.js +29 -0
  153. package/src/v18/walk/iterate/v1/index.js +42 -0
  154. package/src/v18/walk/iterate/v2/index.js +32 -0
  155. package/src/v18/walk/iterate/v3/index.js +46 -0
  156. package/src/v18/walk/iterate/v4/createChildren.js +24 -0
  157. package/src/v18/walk/iterate/v4/index.js +25 -0
  158. package/src/v18/walk/replaceWithData/v1/index.js +42 -0
  159. package/src/v18/walk/replaceWithData/v1/replaceCommon.js +21 -0
  160. package/src/v18/walk/replaceWithData/v2/index.js +105 -0
  161. package/src/v18/walk/replaceWithData/v2/replaceCommon.js +21 -0
  162. package/src/v18/walk/replaceWithData/v3/index.js +15 -0
  163. package/src/v18/walk/replaceWithData/v3/replaceAttributes.js +29 -0
  164. package/src/v18/walk/replaceWithData/v3/replaceCommon.js +23 -0
  165. package/src/v18/walk/replaceWithData/v3/replaceNodeValue.js +27 -0
  166. package/src/v18/walk/walk.js +94 -0
  167. package/src/v19/index.js +55 -0
  168. package/src/v19/meta.js +7 -0
  169. package/src/v19/registerGlobal.js +17 -0
  170. package/src/v19/replace.js +18 -0
  171. package/src/v19/resolvePath.js +29 -0
  172. package/src/v19/walk/iterate/v1/index.js +42 -0
  173. package/src/v19/walk/iterate/v2/index.js +32 -0
  174. package/src/v19/walk/iterate/v3/index.js +46 -0
  175. package/src/v19/walk/iterate/v4/createChildren.js +27 -0
  176. package/src/v19/walk/iterate/v4/index.js +25 -0
  177. package/src/v19/walk/replaceWithData/v1/index.js +42 -0
  178. package/src/v19/walk/replaceWithData/v1/replaceCommon.js +21 -0
  179. package/src/v19/walk/replaceWithData/v2/index.js +105 -0
  180. package/src/v19/walk/replaceWithData/v2/replaceCommon.js +21 -0
  181. package/src/v19/walk/replaceWithData/v3/index.js +15 -0
  182. package/src/v19/walk/replaceWithData/v3/replaceAttributes.js +29 -0
  183. package/src/v19/walk/replaceWithData/v3/replaceCommon.js +23 -0
  184. package/src/v19/walk/replaceWithData/v3/replaceNodeValue.js +27 -0
  185. package/src/v19/walk/walk.js +97 -0
  186. package/src/v8/index.js +69 -0
  187. package/src/v8/instructionEngine/compile/compileTree.js +191 -0
  188. package/src/v8/instructionEngine/compileTree.js +1 -0
  189. package/src/v8/instructionEngine/expandIteration.js +1 -0
  190. package/src/v8/instructionEngine/index.js +16 -0
  191. package/src/v8/instructionEngine/interpolate.js +2 -0
  192. package/src/v8/instructionEngine/iteration/expandIteration.js +95 -0
  193. package/src/v8/instructionEngine/resolve/resolvePath.js +18 -0
  194. package/src/v8/instructionEngine/resolve/resolveTokenValue.js +22 -0
  195. package/src/v8/instructionEngine/resolvePath.js +1 -0
  196. package/src/v8/instructionEngine/resolveTokenValue.js +1 -0
  197. package/src/v8/instructionEngine/story/storyInjector.js +50 -0
  198. package/src/v8/instructionEngine/storyInjector.js +1 -0
  199. package/src/v8/instructionEngine/value/interpolate.js +38 -0
  200. package/src/v9/index.js +96 -0
  201. package/src/v9/instructionEngine/compile/compileTree.js +191 -0
  202. package/src/v9/instructionEngine/compileTree.js +1 -0
  203. package/src/v9/instructionEngine/expandIteration.js +1 -0
  204. package/src/v9/instructionEngine/index.js +29 -0
  205. package/src/v9/instructionEngine/interpolate.js +2 -0
  206. package/src/v9/instructionEngine/iteration/expandIteration.js +95 -0
  207. package/src/v9/instructionEngine/operation/operation.js +237 -0
  208. package/src/v9/instructionEngine/other/other.js +150 -0
  209. package/src/v9/instructionEngine/pipeline/pipeline.js +47 -0
  210. package/src/v9/instructionEngine/replace/replace.js +173 -0
  211. package/src/v9/instructionEngine/resolve/resolvePath.js +18 -0
  212. package/src/v9/instructionEngine/resolve/resolveTokenValue.js +22 -0
  213. package/src/v9/instructionEngine/resolvePath.js +1 -0
  214. package/src/v9/instructionEngine/resolveTokenValue.js +1 -0
  215. package/src/v9/instructionEngine/story/storyInjector.js +50 -0
  216. package/src/v9/instructionEngine/storyInjector.js +1 -0
  217. package/src/v9/instructionEngine/value/interpolate.js +38 -0
package/samples/dataList copy/input/structure.json ADDED
@@ -0,0 +1,18 @@
1
+ {
2
+ "tagName": "datalist",
3
+ "attributes": {
4
+ "id": "dl1"
5
+ },
6
+ "jsonToSpec": {
7
+ "operation": "iterate",
8
+ "source": "data",
9
+ "template": {
10
+ "tagName": "option",
11
+ "attributes": {
12
+ "value": "${LedgerName}"
13
+ },
14
+ "textContent": "${LedgerName}"
15
+ }
16
+ },
17
+ "children": []
18
+ }
package/samples/form/index.html ADDED
@@ -0,0 +1,29 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="utf-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1">
7
+ <title>v30 - Input Only</title>
8
+ <script>
9
+ if (!location.pathname.endsWith('/') && !location.pathname.endsWith('.html')) {
10
+ location.replace(location.pathname + '/' + location.search + location.hash);
11
+ }
12
+ </script>
13
+
14
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"
15
+ integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
16
+
17
+ </head>
18
+
19
+ <body>
20
+ <main class="container">
21
+ <h1 id="head1" style="margin-top:0;font-size:1.25rem">Simple Input (v30)</h1>
22
+ <div id="dom-render-container">
23
+ <div class="text-center py-5 text-muted">Loading input demo...</div>
24
+ </div>
25
+ </main>
26
+ <script type="module" src="./index.js"></script>
27
+ </body>
28
+
29
+ </html>
package/samples/form/index.js ADDED
@@ -0,0 +1,64 @@
1
+ import { default as compile } from "../../src/index.js";
2
+ // import * as domEngine from "./json-to-dom.v27.min.js";
3
+
4
+ import { specToDom } from "https://keshavsoft.github.io/json-to-dom/dist/v31/min.js";
5
+
6
+ const folder = "input";
7
+ let actionBinding = null;
8
+ let state = { structure: null, data: null, compiled: null };
9
+
10
+ const loadInput = async () => {
11
+ const [structure, data] = await Promise.all([
12
+ fetch(`./${folder}/structure.json`).then((r) => r.json()),
13
+ fetch(`./${folder}/data.json`).then((r) => r.json())
14
+ ]);
15
+
16
+ return {
17
+ structure,
18
+ data
19
+ };
20
+ };
21
+
22
+ const render = (structure, data) => {
23
+ const t0 = performance.now();
24
+
25
+ console.log("lllllllllll : ", state);
26
+
27
+
28
+ const specAsJsonToDom = compile(structure, data);
29
+ const compileTime = (performance.now() - t0).toFixed(2);
30
+ const compileBadge = document.getElementById("compile-time-badge");
31
+ if (compileBadge) compileBadge.textContent = `Compiled in ${compileTime}ms`;
32
+
33
+ const container = document.getElementById("dom-render-container");
34
+ if (container) container.innerHTML = "";
35
+
36
+ // console.log("222222222 : ", specAsJsonToDom);
37
+
38
+ specToDom({ spec: specAsJsonToDom, targetHtmlId: "dom-render-container" });
39
+ };
40
+
41
+ const VARIANT = "inline"; // "stacked" | "inline" | "list"
42
+
43
+ const start = async () => {
44
+ try {
45
+ const {
46
+ structure,
47
+ data
48
+ } = await loadInput();
49
+ console.log("aaaaaaa : ", structure, data);
50
+
51
+ render(structure[VARIANT], data);
52
+ } catch (err) {
53
+ const container = document.getElementById("dom-render-container");
54
+ if (container) container.innerHTML = `<div style="color:#b91c1c">Error: ${err.message}</div>`;
55
+ }
56
+ };
57
+
58
+ start();
59
+
60
+ const head1 = document.getElementById("head1");
61
+ const version = window?.ks?.["json-to-spec"]?.meta?.version;
62
+ if (version && head1) {
63
+ head1.innerHTML += ` - ${version}`;
64
+ };
package/samples/form/input/data.json ADDED
@@ -0,0 +1,9 @@
1
+ {
2
+ "fields": [
3
+ { "label": "Ledger Name", "value": "360 one Quant Fund on 20.08.24" },
4
+ { "label": "Ledger Parent Name", "value": "Investments" },
5
+ { "label": "Ledger Type", "value": "Ledger" },
6
+ { "label": "GST Registration Type", "value": "" },
7
+ { "label": "Party GSTIN", "value": "" }
8
+ ]
9
+ }
package/samples/form/input/structure.json ADDED
@@ -0,0 +1,192 @@
1
+ {
2
+ "stacked": {
3
+ "tagName": "div",
4
+ "attributes": { "class": "card shadow-sm" },
5
+ "children": [
6
+ {
7
+ "tagName": "div",
8
+ "attributes": { "class": "card-header fw-semibold" },
9
+ "children": [{ "tagName": "span", "textContent": "Ledger Details" }]
10
+ },
11
+ {
12
+ "tagName": "div",
13
+ "attributes": { "class": "card-body" },
14
+ "jsonToSpec": {
15
+ "operation": "iterate",
16
+ "source": "fields",
17
+ "template": {
18
+ "tagName": "div",
19
+ "attributes": { "class": "mb-3" },
20
+ "children": [
21
+ {
22
+ "tagName": "label",
23
+ "attributes": { "class": "form-label" },
24
+ "textContent": "${label}"
25
+ },
26
+ {
27
+ "tagName": "input",
28
+ "attributes": {
29
+ "type": "text",
30
+ "class": "form-control",
31
+ "value": "${value}",
32
+ "readonly": "true"
33
+ }
34
+ }
35
+ ]
36
+ }
37
+ },
38
+ "children": []
39
+ }
40
+ ]
41
+ },
42
+ "inline": {
43
+ "tagName": "div",
44
+ "attributes": { "class": "card shadow-sm" },
45
+ "children": [
46
+ {
47
+ "tagName": "div",
48
+ "attributes": { "class": "card-header fw-semibold" },
49
+ "children": [{ "tagName": "span", "textContent": "Ledger Details" }]
50
+ },
51
+ {
52
+ "tagName": "div",
53
+ "attributes": { "class": "card-body" },
54
+ "jsonToSpec": {
55
+ "operation": "iterate",
56
+ "source": "fields",
57
+ "template": {
58
+ "tagName": "div",
59
+ "attributes": { "class": "row mb-2 align-items-center" },
60
+ "children": [
61
+ {
62
+ "tagName": "label",
63
+ "attributes": { "class": "col-4 col-form-label fw-medium text-end" },
64
+ "textContent": "${label}"
65
+ },
66
+ {
67
+ "tagName": "div",
68
+ "attributes": { "class": "col-8" },
69
+ "children": [
70
+ {
71
+ "tagName": "input",
72
+ "attributes": {
73
+ "type": "text",
74
+ "class": "form-control form-control-sm",
75
+ "value": "${value}",
76
+ "readonly": "true"
77
+ }
78
+ }
79
+ ]
80
+ }
81
+ ]
82
+ }
83
+ },
84
+ "children": []
85
+ }
86
+ ]
87
+ },
88
+ "inlineWithButtons": {
89
+ "tagName": "div",
90
+ "attributes": { "class": "card shadow-sm" },
91
+ "children": [
92
+ {
93
+ "tagName": "div",
94
+ "attributes": { "class": "card-header fw-semibold" },
95
+ "children": [{ "tagName": "span", "textContent": "Ledger Details" }]
96
+ },
97
+ {
98
+ "tagName": "div",
99
+ "attributes": { "class": "card-body" },
100
+ "jsonToSpec": {
101
+ "operation": "iterate",
102
+ "source": "fields",
103
+ "template": {
104
+ "tagName": "div",
105
+ "attributes": { "class": "row mb-2 align-items-center" },
106
+ "children": [
107
+ {
108
+ "tagName": "label",
109
+ "attributes": { "class": "col-4 col-form-label fw-medium text-end" },
110
+ "textContent": "${label}"
111
+ },
112
+ {
113
+ "tagName": "div",
114
+ "attributes": { "class": "col-6" },
115
+ "children": [
116
+ {
117
+ "tagName": "input",
118
+ "attributes": {
119
+ "type": "text",
120
+ "class": "form-control form-control-sm",
121
+ "value": "${value}",
122
+ "readonly": "true"
123
+ }
124
+ }
125
+ ]
126
+ },
127
+ {
128
+ "tagName": "div",
129
+ "attributes": { "class": "col-2 d-flex gap-1" },
130
+ "children": [
131
+ {
132
+ "tagName": "button",
133
+ "attributes": {
134
+ "type": "button",
135
+ "class": "btn btn-sm btn-outline-primary"
136
+ },
137
+ "textContent": "Edit"
138
+ },
139
+ {
140
+ "tagName": "button",
141
+ "attributes": {
142
+ "type": "button",
143
+ "class": "btn btn-sm btn-outline-secondary"
144
+ },
145
+ "textContent": "Copy"
146
+ }
147
+ ]
148
+ }
149
+ ]
150
+ }
151
+ },
152
+ "children": []
153
+ }
154
+ ]
155
+ },
156
+ "list": {
157
+ "tagName": "div",
158
+ "attributes": { "class": "card shadow-sm" },
159
+ "children": [
160
+ {
161
+ "tagName": "div",
162
+ "attributes": { "class": "card-header fw-semibold" },
163
+ "children": [{ "tagName": "span", "textContent": "Ledger Details" }]
164
+ },
165
+ {
166
+ "tagName": "ul",
167
+ "attributes": { "class": "list-group list-group-flush" },
168
+ "jsonToSpec": {
169
+ "operation": "iterate",
170
+ "source": "fields",
171
+ "template": {
172
+ "tagName": "li",
173
+ "attributes": { "class": "list-group-item d-flex justify-content-between align-items-center" },
174
+ "children": [
175
+ {
176
+ "tagName": "span",
177
+ "attributes": { "class": "text-muted" },
178
+ "textContent": "${label}"
179
+ },
180
+ {
181
+ "tagName": "span",
182
+ "attributes": { "class": "fw-medium" },
183
+ "textContent": "${value}"
184
+ }
185
+ ]
186
+ }
187
+ },
188
+ "children": []
189
+ }
190
+ ]
191
+ }
192
+ }
package/samples/form-/data.json ADDED
@@ -0,0 +1,42 @@
1
+ {
2
+ "columns": [
3
+ {
4
+ "columnName": "Category",
5
+ "title": "Category",
6
+ "field": "Category",
7
+ "value": "Beverages",
8
+ "isVisible": true
9
+ },
10
+ {
11
+ "columnName": "ItemName",
12
+ "title": "Item Name",
13
+ "field": "ItemName",
14
+ "value": "Green Tea",
15
+ "isVisible": true
16
+ },
17
+ {
18
+ "columnName": "Service",
19
+ "title": "Service",
20
+ "field": "Service",
21
+ "value": "Packaging",
22
+ "isVisible": true
23
+ },
24
+ {
25
+ "columnName": "Rate",
26
+ "title": "Rate",
27
+ "field": "Rate",
28
+ "value": 150,
29
+ "isVisible": true
30
+ },
31
+ {
32
+ "columnName": "pk",
33
+ "title": "pk",
34
+ "field": "pk",
35
+ "isVisible": false
36
+ }
37
+ ],
38
+ "Category": "Beverages",
39
+ "ItemName": "Green Tea",
40
+ "Service": "Packaging",
41
+ "Rate": 150
42
+ }
package/samples/form-/structure.json ADDED
@@ -0,0 +1,110 @@
1
+ {
2
+ "tagName": "div",
3
+ "attributes": {
4
+ "class": "card shadow-sm border border-slate-200 rounded-xl overflow-hidden max-w-xl mx-auto"
5
+ },
6
+ "children": [
7
+ {
8
+ "tagName": "div",
9
+ "attributes": {
10
+ "class": "card-header bg-slate-100 px-6 py-4 border-b border-slate-200"
11
+ },
12
+ "children": [
13
+ {
14
+ "tagName": "h2",
15
+ "textContent": "Item Master Form",
16
+ "attributes": {
17
+ "class": "h5 mb-0 fw-bold text-slate-800"
18
+ }
19
+ },
20
+ {
21
+ "tagName": "p",
22
+ "textContent": "Dynamic rows generated by node-level iteration operation",
23
+ "attributes": {
24
+ "class": "small text-muted mb-0"
25
+ }
26
+ }
27
+ ]
28
+ },
29
+ {
30
+ "tagName": "div",
31
+ "attributes": {
32
+ "id": "form-body",
33
+ "class": "card-body p-6 space-y-3"
34
+ },
35
+ "children": [
36
+ {
37
+ "operation": "iterate",
38
+ "source": "columns",
39
+ "filter": {
40
+ "isVisible": true
41
+ },
42
+ "template": {
43
+ "tagName": "div",
44
+ "attributes": {
45
+ "class": "row align-items-center g-2 mb-3"
46
+ },
47
+ "children": [
48
+ {
49
+ "tagName": "div",
50
+ "attributes": {
51
+ "class": "row align-items-center g-2"
52
+ },
53
+ "children": [
54
+ {
55
+ "tagName": "label",
56
+ "textContent": "${title}",
57
+ "attributes": {
58
+ "class": "col-sm-4 col-form-label text-sm-end mb-0 fw-semibold text-secondary small"
59
+ }
60
+ },
61
+ {
62
+ "tagName": "div",
63
+ "attributes": {
64
+ "class": "col-sm-8"
65
+ },
66
+ "children": [
67
+ {
68
+ "tagName": "input",
69
+ "attributes": {
70
+ "type": "text",
71
+ "name": "${field}",
72
+ "placeholder": "Enter ${title}...",
73
+ "class": "form-control"
74
+ }
75
+ }
76
+ ]
77
+ }
78
+ ]
79
+ }
80
+ ]
81
+ }
82
+ }
83
+ ]
84
+ },
85
+ {
86
+ "tagName": "div",
87
+ "attributes": {
88
+ "class": "card-footer bg-slate-50 px-6 py-3 border-t border-slate-200 d-flex justify-content-end gap-2"
89
+ },
90
+ "children": [
91
+ {
92
+ "tagName": "button",
93
+ "textContent": "Cancel",
94
+ "attributes": {
95
+ "type": "button",
96
+ "class": "btn btn-outline-secondary btn-sm"
97
+ }
98
+ },
99
+ {
100
+ "tagName": "button",
101
+ "textContent": "Save Item",
102
+ "attributes": {
103
+ "type": "submit",
104
+ "class": "btn btn-primary btn-sm"
105
+ }
106
+ }
107
+ ]
108
+ }
109
+ ]
110
+ }
package/samples/select/index.html ADDED
@@ -0,0 +1,31 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="utf-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1">
7
+ <title>v30 - Input Only</title>
8
+ <script>
9
+ if (!location.pathname.endsWith('/') && !location.pathname.endsWith('.html')) {
10
+ location.replace(location.pathname + '/' + location.search + location.hash);
11
+ }
12
+ </script>
13
+
14
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"
15
+ integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
16
+
17
+ </head>
18
+
19
+ <body>
20
+ <main>
21
+ <h1 id="head1" style="margin-top:0;font-size:1.25rem">Simple Input (v30)</h1>
22
+ <input list="dl1" class="form-control"></input>
23
+ <input list="uom" class="form-control"></input>
24
+ <div id="dom-render-container">
25
+ <div class="text-center py-5 text-muted">Loading input demo...</div>
26
+ </div>
27
+ </main>
28
+ <script type="module" src="./index.js"></script>
29
+ </body>
30
+
31
+ </html>
package/samples/select/index.js ADDED
@@ -0,0 +1,61 @@
1
+ import { default as compile } from "../../src/index.js";
2
+ // import * as domEngine from "./json-to-dom.v27.min.js";
3
+
4
+ import { specToDom } from "https://keshavsoft.github.io/json-to-dom/dist/v31/min.js";
5
+
6
+ const folder = "input";
7
+ let actionBinding = null;
8
+ let state = { structure: null, data: null, compiled: null };
9
+
10
+ const loadInput = async () => {
11
+ const [structure, data] = await Promise.all([
12
+ fetch(`./${folder}/structure.json`).then((r) => r.json()),
13
+ fetch(`./${folder}/data.json`).then((r) => r.json())
14
+ ]);
15
+
16
+ return {
17
+ structure,
18
+ data
19
+ };
20
+ };
21
+
22
+ const render = (structure, data) => {
23
+ const t0 = performance.now();
24
+
25
+ console.log("lllllllllll : ", state);
26
+
27
+
28
+ const specAsJsonToDom = compile(structure, data);
29
+ const compileTime = (performance.now() - t0).toFixed(2);
30
+ const compileBadge = document.getElementById("compile-time-badge");
31
+ if (compileBadge) compileBadge.textContent = `Compiled in ${compileTime}ms`;
32
+
33
+ const container = document.getElementById("dom-render-container");
34
+ if (container) container.innerHTML = "";
35
+
36
+ // console.log("222222222 : ", specAsJsonToDom);
37
+
38
+ specToDom({ spec: specAsJsonToDom, targetHtmlId: "dom-render-container" });
39
+ };
40
+
41
+ const start = async () => {
42
+ try {
43
+ const {
44
+ structure,
45
+ data
46
+ } = await loadInput();
47
+
48
+ render(structure, data);
49
+ } catch (err) {
50
+ const container = document.getElementById("dom-render-container");
51
+ if (container) container.innerHTML = `<div style="color:#b91c1c">Error: ${err.message}</div>`;
52
+ }
53
+ };
54
+
55
+ start();
56
+
57
+ const head1 = document.getElementById("head1");
58
+ const version = window?.ks?.["json-to-spec"]?.meta?.version;
59
+ if (version && head1) {
60
+ head1.innerHTML += ` - ${version}`;
61
+ };