json-renderers 1.14.1 → 1.17.3
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.
- package/README.md +6 -1
- package/docs/aboutSelect.html +964 -0
- package/docs/aboutTable.html +12 -0
- package/docs/dist/min.js +1577 -1063
- package/docs/dist/v14/min.js +1063 -1063
- package/docs/dist/v15/min.js +1510 -0
- package/docs/dist/v16/min.js +1576 -0
- package/docs/dist/v17/min.js +1577 -0
- package/docs/index.html +283 -79
- package/docs/select.html +33 -11
- package/docs/table/cdn.html +634 -0
- package/docs/table/index.html +607 -0
- package/docs/table/windowKs.html +332 -0
- package/docs/table/windowKsV1.html +647 -0
- package/docs/table.html +34 -11
- package/package.json +2 -2
- package/src/index.js +2 -2
- package/src/v15/guard.js +35 -0
- package/src/{v13 → v15}/index.js +11 -22
- package/src/{v11 → v15}/meta.js +1 -1
- package/src/v16/buildSpec/index.js +40 -0
- package/src/v16/guard.js +38 -0
- package/src/v16/index.js +106 -0
- package/src/{v13 → v16}/meta.js +1 -1
- package/src/v16/registerGlobal.js +27 -0
- package/src/v17/buildSpec/index.js +25 -0
- package/src/v17/getSpec.js +12 -0
- package/src/v17/guard.js +41 -0
- package/src/v17/index.js +29 -0
- package/src/{v12 → v17}/meta.js +1 -1
- package/src/v17/registerGlobal.js +28 -0
- package/src/v17/renderToDom/index.js +47 -0
- package/src/v17/spec.json +9 -0
- package/src/v17/validateConfig.js +37 -0
- package/src/v11/dataLists/fragments.json +0 -1
- package/src/v11/dataLists/index.js +0 -32
- package/src/v11/dataLists/skeleton.json +0 -38
- package/src/v11/index.js +0 -62
- package/src/v11/select/fragments.json +0 -1
- package/src/v11/select/index.js +0 -34
- package/src/v11/select/skeleton.json +0 -23
- package/src/v11/table/index.js +0 -35
- package/src/v11/table/skeleton.json +0 -47
- package/src/v12/index.js +0 -62
- package/src/v12/registerGlobal.js +0 -14
- package/src/v12/table/index.js +0 -35
- package/src/v12/table/skeleton.json +0 -47
- package/src/v13/registerGlobal.js +0 -14
- /package/src/{v13 → v15}/buildSpec/index.js +0 -0
- /package/src/{v11 → v15}/common/deriveColumnsFromData.js +0 -0
- /package/src/{v11 → v15}/registerGlobal.js +0 -0
- /package/src/{v12 → v16}/common/deriveColumnsFromData.js +0 -0
- /package/src/{v13 → v17}/common/deriveColumnsFromData.js +0 -0
package/docs/index.html
CHANGED
|
@@ -5,10 +5,13 @@
|
|
|
5
5
|
<meta charset="UTF-8">
|
|
6
6
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
7
|
<title>json-renderers | Browser DOM Component Renderer</title>
|
|
8
|
-
<meta name="description"
|
|
8
|
+
<meta name="description"
|
|
9
|
+
content="Browser DOM component renderer built on top of json-renderers-build and @keshavsoft/json-to-tag.">
|
|
9
10
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
10
11
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
11
|
-
<link
|
|
12
|
+
<link
|
|
13
|
+
href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Inter:wght@300;400;500;600;700;800&display=swap"
|
|
14
|
+
rel="stylesheet">
|
|
12
15
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
13
16
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
14
17
|
<script>
|
|
@@ -36,28 +39,35 @@
|
|
|
36
39
|
};
|
|
37
40
|
</script>
|
|
38
41
|
<style>
|
|
39
|
-
pre,
|
|
42
|
+
pre,
|
|
43
|
+
code {
|
|
40
44
|
font-family: 'Fira Code', monospace;
|
|
41
45
|
}
|
|
46
|
+
|
|
42
47
|
.custom-scrollbar::-webkit-scrollbar {
|
|
43
48
|
width: 6px;
|
|
44
49
|
height: 6px;
|
|
45
50
|
}
|
|
51
|
+
|
|
46
52
|
.custom-scrollbar::-webkit-scrollbar-track {
|
|
47
53
|
background: rgba(15, 23, 42, 0.6);
|
|
48
54
|
}
|
|
55
|
+
|
|
49
56
|
.custom-scrollbar::-webkit-scrollbar-thumb {
|
|
50
57
|
background: rgba(99, 102, 241, 0.3);
|
|
51
58
|
border-radius: 4px;
|
|
52
59
|
}
|
|
60
|
+
|
|
53
61
|
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
|
54
62
|
background: rgba(99, 102, 241, 0.6);
|
|
55
63
|
}
|
|
64
|
+
|
|
56
65
|
.glass-panel {
|
|
57
66
|
background: rgba(15, 23, 42, 0.75);
|
|
58
67
|
backdrop-filter: blur(12px);
|
|
59
68
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
60
69
|
}
|
|
70
|
+
|
|
61
71
|
.glass-card {
|
|
62
72
|
background: rgba(30, 41, 59, 0.5);
|
|
63
73
|
backdrop-filter: blur(8px);
|
|
@@ -66,33 +76,50 @@
|
|
|
66
76
|
</style>
|
|
67
77
|
</head>
|
|
68
78
|
|
|
69
|
-
<body
|
|
79
|
+
<body
|
|
80
|
+
class="bg-slate-950 text-slate-100 min-h-screen antialiased flex flex-col font-sans selection:bg-indigo-500 selection:text-white">
|
|
70
81
|
|
|
71
82
|
<!-- Top Navbar -->
|
|
72
83
|
<header class="border-b border-slate-800/80 bg-slate-900/80 backdrop-blur sticky top-0 z-50">
|
|
73
84
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 py-3.5 flex items-center justify-between gap-4">
|
|
74
85
|
<div class="flex items-center gap-3">
|
|
75
|
-
<div
|
|
86
|
+
<div
|
|
87
|
+
class="w-10 h-10 rounded-xl bg-gradient-to-br from-emerald-500 via-teal-600 to-indigo-600 flex items-center justify-center font-bold text-white shadow-lg text-lg shadow-emerald-500/20">
|
|
76
88
|
🖥️
|
|
77
89
|
</div>
|
|
78
90
|
<div>
|
|
79
91
|
<div class="flex items-center gap-2">
|
|
80
92
|
<h1 class="text-base font-bold text-white tracking-tight">json-renderers</h1>
|
|
81
|
-
<span
|
|
93
|
+
<span
|
|
94
|
+
class="px-2 py-0.5 text-xs bg-emerald-500/20 text-emerald-300 rounded-full border border-emerald-500/30 font-mono">v13.1.0</span>
|
|
82
95
|
</div>
|
|
83
96
|
<p class="text-xs text-slate-400">Browser DOM Component Renderer Runtime</p>
|
|
84
97
|
</div>
|
|
85
98
|
</div>
|
|
86
99
|
|
|
87
100
|
<div class="flex items-center gap-2.5">
|
|
88
|
-
<a href="
|
|
101
|
+
<a href="aboutSelect.html"
|
|
102
|
+
class="px-3.5 py-1.5 text-xs font-semibold rounded-lg bg-cyan-600 hover:bg-cyan-500 text-white transition flex items-center gap-1.5 shadow-sm shadow-cyan-600/30">
|
|
103
|
+
<span>▣</span> About Select Guide
|
|
104
|
+
</a>
|
|
105
|
+
<a href="table/index.html"
|
|
106
|
+
class="px-3.5 py-1.5 text-xs font-semibold rounded-lg bg-indigo-600 hover:bg-indigo-500 text-white transition flex items-center gap-1.5 shadow-sm shadow-indigo-600/30">
|
|
107
|
+
<span>📖</span> Table Guide
|
|
108
|
+
</a>
|
|
109
|
+
<a href="#workbench"
|
|
110
|
+
class="px-3.5 py-1.5 text-xs font-semibold rounded-lg bg-emerald-600 hover:bg-emerald-500 text-white transition flex items-center gap-1.5 shadow-sm shadow-emerald-600/30">
|
|
89
111
|
<span>⚡</span> Live DOM Workbench
|
|
90
112
|
</a>
|
|
91
|
-
<a href="#samples"
|
|
113
|
+
<a href="#samples"
|
|
114
|
+
class="px-3 py-1.5 text-xs font-semibold rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-200 border border-slate-700 transition hidden sm:flex items-center gap-1">
|
|
92
115
|
<span>📂</span> Samples
|
|
93
116
|
</a>
|
|
94
|
-
<a href="https://github.com/keshavsoft/json-renderers" target="_blank" rel="noopener noreferrer"
|
|
95
|
-
|
|
117
|
+
<a href="https://github.com/keshavsoft/json-renderers" target="_blank" rel="noopener noreferrer"
|
|
118
|
+
class="px-3 py-1.5 text-xs font-semibold rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-200 border border-slate-700 transition flex items-center gap-1.5">
|
|
119
|
+
<svg class="w-4 h-4 fill-current" viewBox="0 0 24 24">
|
|
120
|
+
<path
|
|
121
|
+
d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" />
|
|
122
|
+
</svg>
|
|
96
123
|
<span class="hidden md:inline">GitHub</span>
|
|
97
124
|
</a>
|
|
98
125
|
</div>
|
|
@@ -103,26 +130,43 @@
|
|
|
103
130
|
|
|
104
131
|
<!-- Hero Section -->
|
|
105
132
|
<section class="text-center py-6 sm:py-10 space-y-5">
|
|
106
|
-
<div
|
|
133
|
+
<div
|
|
134
|
+
class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-emerald-500/10 border border-emerald-500/20 text-xs text-emerald-300 font-mono">
|
|
107
135
|
<span class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span>
|
|
108
136
|
Ecosystem Story: DOM Mounting Runtime
|
|
109
137
|
</div>
|
|
110
138
|
<h2 class="text-3xl sm:text-5xl font-extrabold text-white tracking-tight leading-tight">
|
|
111
139
|
Render Business JSON into Live DOM <br class="hidden sm:inline" />
|
|
112
|
-
<span class="text-transparent bg-clip-text bg-gradient-to-r from-emerald-400 via-teal-300 to-indigo-400">Powered
|
|
140
|
+
<span class="text-transparent bg-clip-text bg-gradient-to-r from-emerald-400 via-teal-300 to-indigo-400">Powered
|
|
141
|
+
by json-renderers-build + json-to-tag</span>
|
|
113
142
|
</h2>
|
|
114
143
|
<p class="max-w-4xl mx-auto text-slate-400 text-sm sm:text-base leading-relaxed">
|
|
115
|
-
The real DOM magic happens in <strong class="text-emerald-300 font-mono">@keshavsoft/json-to-tag</strong>.
|
|
144
|
+
The real DOM magic happens in <strong class="text-emerald-300 font-mono">@keshavsoft/json-to-tag</strong>.
|
|
145
|
+
Before that, data may be shaped in <strong class="text-indigo-300 font-mono">json-transformer</strong>, a
|
|
146
|
+
component blueprint is built in <strong class="text-indigo-300 font-mono">json-renderers-build</strong>, and
|
|
147
|
+
<strong class="text-slate-200">json-renderers</strong> simply orchestrates the runtime flow and mounts the final
|
|
148
|
+
HTML into the browser container.
|
|
116
149
|
</p>
|
|
117
150
|
|
|
118
151
|
<div class="flex flex-wrap items-center justify-center gap-3 pt-2">
|
|
119
|
-
<a href="
|
|
152
|
+
<a href="aboutSelect.html"
|
|
153
|
+
class="px-5 py-2.5 rounded-xl bg-gradient-to-r from-cyan-600 to-teal-600 hover:from-cyan-500 hover:to-teal-500 text-white font-semibold text-xs sm:text-sm transition flex items-center gap-2 shadow-lg shadow-cyan-600/25">
|
|
154
|
+
<span>▣</span> Select Guide (CDN & KS)
|
|
155
|
+
</a>
|
|
156
|
+
<a href="table/index.html"
|
|
157
|
+
class="px-5 py-2.5 rounded-xl bg-gradient-to-r from-emerald-600 to-indigo-600 hover:from-emerald-500 hover:to-indigo-500 text-white font-semibold text-xs sm:text-sm transition flex items-center gap-2 shadow-lg shadow-indigo-600/25">
|
|
158
|
+
<span>📖</span> Table Guide (CDN & KS)
|
|
159
|
+
</a>
|
|
160
|
+
<a href="#workbench"
|
|
161
|
+
class="px-5 py-2.5 rounded-xl bg-emerald-600 hover:bg-emerald-500 text-white font-semibold text-xs sm:text-sm transition flex items-center gap-2 shadow-lg shadow-emerald-600/25">
|
|
120
162
|
<span>⚡</span> Try Live DOM Mounting
|
|
121
163
|
</a>
|
|
122
|
-
<a href="table.html"
|
|
164
|
+
<a href="table.html"
|
|
165
|
+
class="px-5 py-2.5 rounded-xl bg-slate-900 hover:bg-slate-800 border border-slate-800 text-slate-200 font-semibold text-xs sm:text-sm transition flex items-center gap-2">
|
|
123
166
|
<span>📊</span> Table Story
|
|
124
167
|
</a>
|
|
125
|
-
<a href="select.html"
|
|
168
|
+
<a href="select.html"
|
|
169
|
+
class="px-5 py-2.5 rounded-xl bg-slate-900 hover:bg-slate-800 border border-slate-800 text-slate-200 font-semibold text-xs sm:text-sm transition flex items-center gap-2">
|
|
126
170
|
<span>▣</span> Select Story
|
|
127
171
|
</a>
|
|
128
172
|
</div>
|
|
@@ -136,14 +180,17 @@
|
|
|
136
180
|
<h3 class="text-xl sm:text-2xl font-bold text-white tracking-tight">What the runtime actually asks for</h3>
|
|
137
181
|
</div>
|
|
138
182
|
<p class="text-xs text-slate-400 max-w-md">
|
|
139
|
-
The runtime does not hand-code table or select DOM. It asks for a JSON blueprint and then lets <span
|
|
183
|
+
The runtime does not hand-code table or select DOM. It asks for a JSON blueprint and then lets <span
|
|
184
|
+
class="text-emerald-300 font-mono">json-to-tag</span> create real elements.
|
|
140
185
|
</p>
|
|
141
186
|
</div>
|
|
142
187
|
|
|
143
188
|
<div class="grid grid-cols-1 xl:grid-cols-2 gap-6">
|
|
144
189
|
<div class="glass-panel p-5 rounded-2xl">
|
|
145
190
|
<div class="flex items-center justify-between mb-3">
|
|
146
|
-
<span
|
|
191
|
+
<span
|
|
192
|
+
class="px-2 py-0.5 text-[11px] font-mono rounded bg-emerald-500/20 text-emerald-300 border border-emerald-500/30">Table
|
|
193
|
+
Spec</span>
|
|
147
194
|
<span class="text-lg">📊</span>
|
|
148
195
|
</div>
|
|
149
196
|
<pre class="text-xs text-slate-200 bg-slate-950/80 border border-slate-800 rounded-xl p-3 overflow-auto"><code>{
|
|
@@ -160,7 +207,9 @@
|
|
|
160
207
|
|
|
161
208
|
<div class="glass-panel p-5 rounded-2xl">
|
|
162
209
|
<div class="flex items-center justify-between mb-3">
|
|
163
|
-
<span
|
|
210
|
+
<span
|
|
211
|
+
class="px-2 py-0.5 text-[11px] font-mono rounded bg-cyan-500/20 text-cyan-300 border border-cyan-500/30">Select
|
|
212
|
+
Spec</span>
|
|
164
213
|
<span class="text-lg">▣</span>
|
|
165
214
|
</div>
|
|
166
215
|
<pre class="text-xs text-slate-200 bg-slate-950/80 border border-slate-800 rounded-xl p-3 overflow-auto"><code>{
|
|
@@ -184,7 +233,10 @@
|
|
|
184
233
|
<h3 class="text-xl sm:text-2xl font-bold text-white tracking-tight">The "In-Between" Handoff Story</h3>
|
|
185
234
|
</div>
|
|
186
235
|
<p class="text-xs text-slate-400 max-w-md">
|
|
187
|
-
How <span class="text-indigo-300 font-mono">json-transformer</span>, <span
|
|
236
|
+
How <span class="text-indigo-300 font-mono">json-transformer</span>, <span
|
|
237
|
+
class="text-indigo-300 font-mono">json-renderers-build</span>, <span
|
|
238
|
+
class="text-emerald-300 font-mono">json-to-tag</span>, and <span
|
|
239
|
+
class="text-emerald-300 font-mono">json-renderers</span> work together.
|
|
188
240
|
</p>
|
|
189
241
|
</div>
|
|
190
242
|
|
|
@@ -192,14 +244,21 @@
|
|
|
192
244
|
<!-- Step 1 -->
|
|
193
245
|
<div class="glass-panel p-5 rounded-2xl relative">
|
|
194
246
|
<div class="flex items-center justify-between mb-3">
|
|
195
|
-
<span
|
|
247
|
+
<span
|
|
248
|
+
class="px-2 py-0.5 text-[11px] font-mono rounded bg-indigo-500/20 text-indigo-300 border border-indigo-500/30">Step
|
|
249
|
+
1 • Spec Request</span>
|
|
196
250
|
<span class="text-lg">📦</span>
|
|
197
251
|
</div>
|
|
198
252
|
<h4 class="text-base font-bold text-white mb-2">json-renderers-build</h4>
|
|
199
253
|
<p class="text-xs text-slate-400 leading-relaxed mb-4">
|
|
200
|
-
<code class="text-emerald-300 font-mono">json-renderers</code> calls <code
|
|
254
|
+
<code class="text-emerald-300 font-mono">json-renderers</code> calls <code
|
|
255
|
+
class="text-indigo-300 font-mono">jsonRenderBuild({ type, data, columns })</code>. The builder matches the
|
|
256
|
+
skeleton blueprint (<code class="text-indigo-300 font-mono">table</code>, <code
|
|
257
|
+
class="text-indigo-300 font-mono">select</code>) and evaluates it with <code
|
|
258
|
+
class="text-indigo-300 font-mono">json-to-spec</code>.
|
|
201
259
|
</p>
|
|
202
|
-
<div
|
|
260
|
+
<div
|
|
261
|
+
class="p-2.5 rounded-lg bg-slate-950/80 border border-indigo-500/30 text-[11px] font-mono text-indigo-300">
|
|
203
262
|
Returns: specAsJsonToDom (AST)
|
|
204
263
|
</div>
|
|
205
264
|
</div>
|
|
@@ -207,32 +266,45 @@
|
|
|
207
266
|
<!-- Step 2 -->
|
|
208
267
|
<div class="glass-panel p-5 rounded-2xl relative">
|
|
209
268
|
<div class="flex items-center justify-between mb-3">
|
|
210
|
-
<span
|
|
269
|
+
<span
|
|
270
|
+
class="px-2 py-0.5 text-[11px] font-mono rounded bg-purple-500/20 text-purple-300 border border-purple-500/30">Step
|
|
271
|
+
2 • Instantiation</span>
|
|
211
272
|
<span class="text-lg">🏷️</span>
|
|
212
273
|
</div>
|
|
213
274
|
<h4 class="text-base font-bold text-white mb-2">@keshavsoft/json-to-tag</h4>
|
|
214
275
|
<p class="text-xs text-slate-400 leading-relaxed mb-4">
|
|
215
|
-
The generated specification AST is unwrapped (if fragment) and handed to <code
|
|
276
|
+
The generated specification AST is unwrapped (if fragment) and handed to <code
|
|
277
|
+
class="text-purple-300 font-mono">jsonToTag(spec)</code>. Real browser DOM elements (<code
|
|
278
|
+
class="text-purple-300 font-mono">HTMLTableElement</code>, <code
|
|
279
|
+
class="text-purple-300 font-mono">DocumentFragment</code>) are constructed.
|
|
216
280
|
</p>
|
|
217
|
-
<div
|
|
281
|
+
<div
|
|
282
|
+
class="p-2.5 rounded-lg bg-slate-950/80 border border-purple-500/30 text-[11px] font-mono text-purple-300">
|
|
218
283
|
Returns: content (DOM Node / List)
|
|
219
284
|
</div>
|
|
220
285
|
</div>
|
|
221
286
|
|
|
222
287
|
<!-- Step 3 -->
|
|
223
|
-
<div
|
|
224
|
-
|
|
288
|
+
<div
|
|
289
|
+
class="glass-panel p-5 rounded-2xl border-emerald-500/50 shadow-xl shadow-emerald-500/10 bg-slate-900/90 relative">
|
|
290
|
+
<div
|
|
291
|
+
class="absolute top-0 right-0 bg-emerald-600 text-white text-[10px] uppercase font-bold tracking-wider px-2.5 py-0.5 rounded-bl-lg">
|
|
225
292
|
This Repo
|
|
226
293
|
</div>
|
|
227
294
|
<div class="flex items-center justify-between mb-3">
|
|
228
|
-
<span
|
|
295
|
+
<span
|
|
296
|
+
class="px-2 py-0.5 text-[11px] font-mono rounded bg-emerald-500/20 text-emerald-300 border border-emerald-500/30">Step
|
|
297
|
+
3 • Container Mount</span>
|
|
229
298
|
<span class="text-lg">🖥️</span>
|
|
230
299
|
</div>
|
|
231
300
|
<h4 class="text-base font-bold text-emerald-300 mb-2">json-renderers</h4>
|
|
232
301
|
<p class="text-xs text-slate-300 leading-relaxed mb-4">
|
|
233
|
-
Locates <code class="text-emerald-300 font-mono">document.getElementById(targetHtmlId)</code>. Clears or
|
|
302
|
+
Locates <code class="text-emerald-300 font-mono">document.getElementById(targetHtmlId)</code>. Clears or
|
|
303
|
+
prepends content based on <code class="text-emerald-300 font-mono">appendPosition</code>, mounts the nodes,
|
|
304
|
+
and returns the mounted container.
|
|
234
305
|
</p>
|
|
235
|
-
<div
|
|
306
|
+
<div
|
|
307
|
+
class="p-2.5 rounded-lg bg-slate-950/80 border border-emerald-500/30 text-[11px] font-mono text-emerald-200">
|
|
236
308
|
container.append(content)
|
|
237
309
|
</div>
|
|
238
310
|
</div>
|
|
@@ -248,12 +320,14 @@
|
|
|
248
320
|
</div>
|
|
249
321
|
<div class="flex items-center gap-3">
|
|
250
322
|
<label for="component-type" class="text-xs text-slate-400 font-medium">Type:</label>
|
|
251
|
-
<select id="component-type"
|
|
323
|
+
<select id="component-type"
|
|
324
|
+
class="bg-slate-900 border border-slate-700 text-xs rounded-lg px-3 py-1.5 text-white font-mono focus:ring-2 focus:ring-emerald-500 focus:outline-none">
|
|
252
325
|
<option value="table" selected>table</option>
|
|
253
326
|
<option value="select">select</option>
|
|
254
327
|
<option value="selectOptionsOnly">selectOptionsOnly</option>
|
|
255
328
|
</select>
|
|
256
|
-
<button id="btn-render-dom"
|
|
329
|
+
<button id="btn-render-dom"
|
|
330
|
+
class="px-3.5 py-1.5 bg-emerald-600 hover:bg-emerald-500 text-white rounded-lg text-xs font-semibold shadow-sm transition flex items-center gap-1 shadow-emerald-600/30">
|
|
257
331
|
<span>▶</span> Mount to DOM
|
|
258
332
|
</button>
|
|
259
333
|
</div>
|
|
@@ -269,15 +343,19 @@
|
|
|
269
343
|
<span>📝</span> Input Data (JSON)
|
|
270
344
|
</span>
|
|
271
345
|
<div class="flex items-center gap-2">
|
|
272
|
-
<select id="preset-selector"
|
|
346
|
+
<select id="preset-selector"
|
|
347
|
+
class="bg-slate-800 border border-slate-700 text-[11px] rounded px-2 py-1 text-slate-300 font-mono">
|
|
273
348
|
<option value="batches">Preset: Batches</option>
|
|
274
349
|
<option value="employees">Preset: Employees</option>
|
|
275
350
|
<option value="ledgers">Preset: Ledgers</option>
|
|
276
351
|
</select>
|
|
277
|
-
<button id="btn-format-data"
|
|
352
|
+
<button id="btn-format-data"
|
|
353
|
+
class="text-[11px] text-slate-400 hover:text-white px-2 py-0.5 rounded bg-slate-800">Format</button>
|
|
278
354
|
</div>
|
|
279
355
|
</div>
|
|
280
|
-
<textarea id="input-data" rows="8"
|
|
356
|
+
<textarea id="input-data" rows="8"
|
|
357
|
+
class="w-full bg-slate-950 text-emerald-200 border border-slate-800 rounded-xl p-3 font-mono text-xs focus:ring-2 focus:ring-emerald-500 focus:outline-none custom-scrollbar"
|
|
358
|
+
spellcheck="false"></textarea>
|
|
281
359
|
</div>
|
|
282
360
|
|
|
283
361
|
<div id="columns-panel" class="glass-panel p-4 rounded-2xl space-y-3">
|
|
@@ -285,9 +363,12 @@
|
|
|
285
363
|
<span class="text-xs font-bold text-white uppercase tracking-wider font-mono flex items-center gap-1.5">
|
|
286
364
|
<span>📊</span> Columns (for table)
|
|
287
365
|
</span>
|
|
288
|
-
<button id="btn-format-columns"
|
|
366
|
+
<button id="btn-format-columns"
|
|
367
|
+
class="text-[11px] text-slate-400 hover:text-white px-2 py-0.5 rounded bg-slate-800">Format</button>
|
|
289
368
|
</div>
|
|
290
|
-
<textarea id="input-columns" rows="5"
|
|
369
|
+
<textarea id="input-columns" rows="5"
|
|
370
|
+
class="w-full bg-slate-950 text-emerald-200 border border-slate-800 rounded-xl p-3 font-mono text-xs focus:ring-2 focus:ring-emerald-500 focus:outline-none custom-scrollbar"
|
|
371
|
+
spellcheck="false"></textarea>
|
|
291
372
|
</div>
|
|
292
373
|
|
|
293
374
|
<div class="p-3.5 rounded-xl bg-slate-900/60 border border-slate-800/80 text-xs text-slate-400 space-y-1">
|
|
@@ -295,7 +376,10 @@
|
|
|
295
376
|
<span>🎯</span> Mounting Contract
|
|
296
377
|
</div>
|
|
297
378
|
<p>
|
|
298
|
-
Calls <code
|
|
379
|
+
Calls <code
|
|
380
|
+
class="text-emerald-300 font-mono">render({ type, targetHtmlId: "live-mount-container", data, columns })</code>.
|
|
381
|
+
Ingests spec from <code class="text-indigo-300 font-mono">json-renderers-build</code> and instantiates
|
|
382
|
+
into DOM.
|
|
299
383
|
</p>
|
|
300
384
|
</div>
|
|
301
385
|
</div>
|
|
@@ -305,16 +389,19 @@
|
|
|
305
389
|
<!-- View Toggle -->
|
|
306
390
|
<div class="flex items-center justify-between bg-slate-900/80 p-1.5 rounded-xl border border-slate-800">
|
|
307
391
|
<div class="flex items-center gap-1">
|
|
308
|
-
<button id="tab-dom"
|
|
392
|
+
<button id="tab-dom"
|
|
393
|
+
class="px-3 py-1.5 text-xs font-semibold rounded-lg bg-emerald-600 text-white transition flex items-center gap-1.5">
|
|
309
394
|
<span>🖥️</span> Live Mounted DOM
|
|
310
395
|
</button>
|
|
311
|
-
<button id="tab-in-between"
|
|
396
|
+
<button id="tab-in-between"
|
|
397
|
+
class="px-3 py-1.5 text-xs font-semibold rounded-lg text-slate-400 hover:text-white transition flex items-center gap-1.5">
|
|
312
398
|
<span>🔗</span> "In-Between" Spec AST
|
|
313
399
|
</button>
|
|
314
400
|
</div>
|
|
315
401
|
|
|
316
402
|
<div class="flex items-center gap-2 pr-1">
|
|
317
|
-
<span id="mount-status-badge"
|
|
403
|
+
<span id="mount-status-badge"
|
|
404
|
+
class="px-2 py-0.5 text-[11px] bg-emerald-500/20 text-emerald-300 rounded font-mono border border-emerald-500/30">
|
|
318
405
|
Mounted
|
|
319
406
|
</span>
|
|
320
407
|
</div>
|
|
@@ -322,27 +409,33 @@
|
|
|
322
409
|
|
|
323
410
|
<!-- View 1: Real DOM Container -->
|
|
324
411
|
<div id="view-dom" class="glass-panel p-4 rounded-2xl flex-1 flex flex-col min-h-[460px]">
|
|
325
|
-
<div
|
|
412
|
+
<div
|
|
413
|
+
class="flex items-center justify-between pb-2 border-b border-slate-800/80 mb-3 text-xs text-slate-400">
|
|
326
414
|
<span class="font-mono text-emerald-400 flex items-center gap-1.5">
|
|
327
415
|
<span class="w-2 h-2 rounded-full bg-emerald-400"></span> #live-mount-container
|
|
328
416
|
</span>
|
|
329
417
|
<span class="font-mono text-[11px]">Real HTML Elements</span>
|
|
330
418
|
</div>
|
|
331
419
|
|
|
332
|
-
<div id="live-mount-container"
|
|
420
|
+
<div id="live-mount-container"
|
|
421
|
+
class="flex-1 p-3 bg-slate-900/60 rounded-xl border border-slate-800 overflow-auto custom-scrollbar">
|
|
333
422
|
<!-- Elements mounted by json-renderers here -->
|
|
334
423
|
</div>
|
|
335
424
|
</div>
|
|
336
425
|
|
|
337
426
|
<!-- View 2: "In-Between" Spec AST from json-renderers-build -->
|
|
338
427
|
<div id="view-in-between" class="glass-panel p-4 rounded-2xl flex-1 flex flex-col min-h-[460px] hidden">
|
|
339
|
-
<div
|
|
428
|
+
<div
|
|
429
|
+
class="flex items-center justify-between pb-2 border-b border-slate-800/80 mb-3 text-xs text-slate-400">
|
|
340
430
|
<span class="font-mono text-indigo-400 flex items-center gap-1.5">
|
|
341
431
|
<span>📦</span> Generated by json-renderers-build before mounting
|
|
342
432
|
</span>
|
|
343
|
-
<button id="btn-copy-ast"
|
|
433
|
+
<button id="btn-copy-ast"
|
|
434
|
+
class="px-2 py-0.5 text-[11px] bg-slate-800 hover:bg-slate-700 text-slate-300 rounded font-mono">Copy
|
|
435
|
+
AST</button>
|
|
344
436
|
</div>
|
|
345
|
-
<pre
|
|
437
|
+
<pre
|
|
438
|
+
class="flex-1 m-0 p-3 bg-slate-950 rounded-xl text-indigo-200 font-mono text-xs overflow-auto custom-scrollbar leading-relaxed max-h-[500px]"><code id="code-output-ast">// Loading in-between spec...</code></pre>
|
|
346
439
|
</div>
|
|
347
440
|
|
|
348
441
|
</div>
|
|
@@ -366,7 +459,8 @@
|
|
|
366
459
|
<span class="px-2 py-0.5 rounded bg-emerald-500/20 text-emerald-300 text-[11px] font-mono">Data Grid</span>
|
|
367
460
|
</div>
|
|
368
461
|
<p class="text-xs text-slate-400 leading-relaxed">
|
|
369
|
-
Mounts complete Bootstrap-styled table into the target element. Supports multi-column headers and automated
|
|
462
|
+
Mounts complete Bootstrap-styled table into the target element. Supports multi-column headers and automated
|
|
463
|
+
cell value bindings.
|
|
370
464
|
</p>
|
|
371
465
|
<div class="text-[11px] font-mono text-slate-400 bg-slate-950 p-2.5 rounded-lg border border-slate-800">
|
|
372
466
|
render({ type: "table", targetHtmlId, data, columns })
|
|
@@ -380,7 +474,8 @@
|
|
|
380
474
|
<span class="px-2 py-0.5 rounded bg-teal-500/20 text-teal-300 text-[11px] font-mono">Select Element</span>
|
|
381
475
|
</div>
|
|
382
476
|
<p class="text-xs text-slate-400 leading-relaxed">
|
|
383
|
-
Mounts a newly created <code class="text-teal-300"><select id="LedgerName"></code> populated with
|
|
477
|
+
Mounts a newly created <code class="text-teal-300"><select id="LedgerName"></code> populated with
|
|
478
|
+
child option elements into the target container.
|
|
384
479
|
</p>
|
|
385
480
|
<div class="text-[11px] font-mono text-slate-400 bg-slate-950 p-2.5 rounded-lg border border-slate-800">
|
|
386
481
|
render({ type: "select", targetHtmlId, data })
|
|
@@ -390,11 +485,14 @@
|
|
|
390
485
|
<!-- Select Options Only Card -->
|
|
391
486
|
<div class="glass-card p-5 rounded-2xl space-y-3">
|
|
392
487
|
<div class="flex items-center justify-between">
|
|
393
|
-
<span class="text-xs font-mono font-bold text-white uppercase tracking-wider">type:
|
|
394
|
-
|
|
488
|
+
<span class="text-xs font-mono font-bold text-white uppercase tracking-wider">type:
|
|
489
|
+
"selectOptionsOnly"</span>
|
|
490
|
+
<span class="px-2 py-0.5 rounded bg-indigo-500/20 text-indigo-300 text-[11px] font-mono">Option
|
|
491
|
+
Injection</span>
|
|
395
492
|
</div>
|
|
396
493
|
<p class="text-xs text-slate-400 leading-relaxed">
|
|
397
|
-
Populates dynamic option items directly into a pre-existing <code
|
|
494
|
+
Populates dynamic option items directly into a pre-existing <code
|
|
495
|
+
class="text-indigo-300"><select></code> element without modifying outer wrapper tags.
|
|
398
496
|
</p>
|
|
399
497
|
<div class="text-[11px] font-mono text-slate-400 bg-slate-950 p-2.5 rounded-lg border border-slate-800">
|
|
400
498
|
render({ type: "selectOptionsOnly", targetHtmlId, data })
|
|
@@ -406,53 +504,155 @@
|
|
|
406
504
|
|
|
407
505
|
<!-- Runnable Samples Section -->
|
|
408
506
|
<section id="samples" class="space-y-6">
|
|
409
|
-
<div class="border-b border-slate-800/80 pb-4">
|
|
410
|
-
<
|
|
411
|
-
|
|
507
|
+
<div class="border-b border-slate-800/80 pb-4 flex flex-col sm:flex-row sm:items-end justify-between gap-3">
|
|
508
|
+
<div>
|
|
509
|
+
<span class="text-xs uppercase font-mono tracking-wider text-emerald-400">Browser Demos</span>
|
|
510
|
+
<h3 class="text-xl sm:text-2xl font-bold text-white tracking-tight">Included Verification Samples</h3>
|
|
511
|
+
</div>
|
|
512
|
+
<a href="abouutTable.html"
|
|
513
|
+
class="inline-flex items-center gap-1.5 text-xs font-semibold text-emerald-400 hover:text-emerald-300 font-mono transition">
|
|
514
|
+
<span>📖</span> Read Complete Table Guide (CDN & window.ks) →
|
|
515
|
+
</a>
|
|
412
516
|
</div>
|
|
413
517
|
|
|
414
|
-
|
|
518
|
+
<!-- Spotlight Banner for Table Guide -->
|
|
519
|
+
<div
|
|
520
|
+
class="glass-panel p-5 rounded-2xl border border-indigo-500/30 bg-gradient-to-r from-indigo-950/40 via-slate-900 to-emerald-950/40 flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
|
|
521
|
+
<div class="space-y-1">
|
|
522
|
+
<div
|
|
523
|
+
class="inline-flex items-center gap-2 px-2.5 py-0.5 rounded-full bg-indigo-500/20 text-indigo-300 border border-indigo-500/30 text-xs font-mono">
|
|
524
|
+
Table Guide
|
|
525
|
+
</div>
|
|
526
|
+
<h4 class="text-base font-bold text-white">How to Create HTML Tables with CDN & window.ks</h4>
|
|
527
|
+
<p class="text-xs text-slate-400 max-w-2xl leading-relaxed">
|
|
528
|
+
Beginner-friendly walkthrough explaining step-by-step how to render tables using CDN imports vs the global
|
|
529
|
+
<code class="text-indigo-300 font-mono">window.ks</code> namespace, complete with live playground and
|
|
530
|
+
side-by-side comparison.
|
|
531
|
+
</p>
|
|
532
|
+
</div>
|
|
533
|
+
<a href="table/index.html"
|
|
534
|
+
class="px-4 py-2 rounded-xl bg-indigo-600 hover:bg-indigo-500 text-white font-semibold text-xs transition whitespace-nowrap shadow-md shadow-indigo-600/30 flex items-center gap-1.5">
|
|
535
|
+
<span>📖</span> Open Table Guide →
|
|
536
|
+
</a>
|
|
537
|
+
</div>
|
|
538
|
+
|
|
539
|
+
<!-- Spotlight Banner for Select Guide -->
|
|
540
|
+
<div
|
|
541
|
+
class="glass-panel p-5 rounded-2xl border border-cyan-500/30 bg-gradient-to-r from-cyan-950/40 via-slate-900 to-teal-950/40 flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
|
|
542
|
+
<div class="space-y-1">
|
|
543
|
+
<div
|
|
544
|
+
class="inline-flex items-center gap-2 px-2.5 py-0.5 rounded-full bg-cyan-500/20 text-cyan-300 border border-cyan-500/30 text-xs font-mono">
|
|
545
|
+
Select Guide (White BG Edition)
|
|
546
|
+
</div>
|
|
547
|
+
<h4 class="text-base font-bold text-white">How to Create HTML Select Dropdowns with CDN & window.ks</h4>
|
|
548
|
+
<p class="text-xs text-slate-400 max-w-2xl leading-relaxed">
|
|
549
|
+
Complete guide on populating dropdown elements from JSON data using <code class="text-cyan-300 font-mono">byCdn</code> and <code class="text-cyan-300 font-mono">byKs</code> with interactive testing and live selection tracking.
|
|
550
|
+
</p>
|
|
551
|
+
</div>
|
|
552
|
+
<a href="aboutSelect.html"
|
|
553
|
+
class="px-4 py-2 rounded-xl bg-cyan-600 hover:bg-cyan-500 text-white font-semibold text-xs transition whitespace-nowrap shadow-md shadow-cyan-600/30 flex items-center gap-1.5">
|
|
554
|
+
<span>▣</span> Open Select Guide →
|
|
555
|
+
</a>
|
|
556
|
+
</div>
|
|
557
|
+
|
|
558
|
+
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
415
559
|
|
|
416
|
-
<a href="../samples/
|
|
560
|
+
<a href="../samples/select/byCdn/index.html"
|
|
561
|
+
class="glass-panel p-5 rounded-2xl group hover:border-cyan-500/50 transition flex flex-col justify-between">
|
|
417
562
|
<div>
|
|
418
563
|
<div class="flex items-center justify-between mb-3">
|
|
419
|
-
<span class="text-xl"
|
|
420
|
-
<span class="text-xs text-
|
|
564
|
+
<span class="text-xl">⚡</span>
|
|
565
|
+
<span class="text-xs text-cyan-400 font-mono group-hover:translate-x-1 transition">Open Demo →</span>
|
|
421
566
|
</div>
|
|
422
|
-
<h4 class="text-base font-bold text-white mb-1 group-hover:text-
|
|
567
|
+
<h4 class="text-base font-bold text-white mb-1 group-hover:text-cyan-300 transition">Select via CDN (byCdn)</h4>
|
|
423
568
|
<p class="text-xs text-slate-400 leading-relaxed mb-4">
|
|
424
|
-
Mounts
|
|
569
|
+
Mounts select dropdown via direct ES module import from jsDelivr CDN (<code class="text-cyan-300 font-mono">samples/select/byCdn</code>).
|
|
425
570
|
</p>
|
|
426
571
|
</div>
|
|
427
|
-
<div class="text-[11px] font-mono text-slate-500">samples/
|
|
572
|
+
<div class="text-[11px] font-mono text-slate-500">samples/select/byCdn/index.html</div>
|
|
428
573
|
</a>
|
|
429
574
|
|
|
430
|
-
<a href="../samples/select/index.html"
|
|
575
|
+
<a href="../samples/select/byKs/index.html"
|
|
576
|
+
class="glass-panel p-5 rounded-2xl group hover:border-indigo-500/50 transition flex flex-col justify-between">
|
|
431
577
|
<div>
|
|
432
578
|
<div class="flex items-center justify-between mb-3">
|
|
433
|
-
<span class="text-xl"
|
|
434
|
-
<span class="text-xs text-
|
|
579
|
+
<span class="text-xl">🌐</span>
|
|
580
|
+
<span class="text-xs text-indigo-400 font-mono group-hover:translate-x-1 transition">Open Demo →</span>
|
|
435
581
|
</div>
|
|
436
|
-
<h4 class="text-base font-bold text-white mb-1 group-hover:text-
|
|
582
|
+
<h4 class="text-base font-bold text-white mb-1 group-hover:text-indigo-300 transition">Select via window.ks (byKs)</h4>
|
|
437
583
|
<p class="text-xs text-slate-400 leading-relaxed mb-4">
|
|
438
|
-
Mounts
|
|
584
|
+
Mounts select dropdown using the global namespace (<code class="text-indigo-300 font-mono">samples/select/byKs</code>).
|
|
439
585
|
</p>
|
|
440
586
|
</div>
|
|
441
|
-
<div class="text-[11px] font-mono text-slate-500">samples/select/index.html</div>
|
|
587
|
+
<div class="text-[11px] font-mono text-slate-500">samples/select/byKs/index.html</div>
|
|
442
588
|
</a>
|
|
443
589
|
|
|
444
|
-
<a href="
|
|
590
|
+
<a href="aboutSelect.html"
|
|
591
|
+
class="glass-panel p-5 rounded-2xl group hover:border-cyan-500/50 transition flex flex-col justify-between border-dashed border-cyan-500/40">
|
|
445
592
|
<div>
|
|
446
593
|
<div class="flex items-center justify-between mb-3">
|
|
447
|
-
<span class="text-xl"
|
|
448
|
-
<span class="text-xs text-
|
|
594
|
+
<span class="text-xl">▣</span>
|
|
595
|
+
<span class="text-xs text-cyan-400 font-mono group-hover:translate-x-1 transition">Read Guide →</span>
|
|
596
|
+
</div>
|
|
597
|
+
<h4 class="text-base font-bold text-white mb-1 group-hover:text-cyan-300 transition">About Select Guide</h4>
|
|
598
|
+
<p class="text-xs text-slate-400 leading-relaxed mb-4">
|
|
599
|
+
Complete beginner documentation with white background and suitable font colors.
|
|
600
|
+
</p>
|
|
601
|
+
</div>
|
|
602
|
+
<div class="text-[11px] font-mono text-cyan-400/80">docs/aboutSelect.html</div>
|
|
603
|
+
</a>
|
|
604
|
+
|
|
605
|
+
<a href="../samples/table/byCdn/index.html"
|
|
606
|
+
class="glass-panel p-5 rounded-2xl group hover:border-emerald-500/50 transition flex flex-col justify-between">
|
|
607
|
+
<div>
|
|
608
|
+
<div class="flex items-center justify-between mb-3">
|
|
609
|
+
<span class="text-xl">⚡</span>
|
|
610
|
+
<span class="text-xs text-emerald-400 font-mono group-hover:translate-x-1 transition">Open Demo
|
|
611
|
+
→</span>
|
|
449
612
|
</div>
|
|
450
|
-
<h4 class="text-base font-bold text-white mb-1 group-hover:text-
|
|
613
|
+
<h4 class="text-base font-bold text-white mb-1 group-hover:text-emerald-300 transition">Table via CDN Sample
|
|
614
|
+
</h4>
|
|
451
615
|
<p class="text-xs text-slate-400 leading-relaxed mb-4">
|
|
452
|
-
|
|
616
|
+
Mounts batches table via direct ES module import from jsDelivr CDN (<code
|
|
617
|
+
class="text-emerald-300 font-mono">import render from "..."</code>).
|
|
453
618
|
</p>
|
|
454
619
|
</div>
|
|
455
|
-
<div class="text-[11px] font-mono text-slate-500">samples/
|
|
620
|
+
<div class="text-[11px] font-mono text-slate-500">samples/table/byCdn/index.html</div>
|
|
621
|
+
</a>
|
|
622
|
+
|
|
623
|
+
<a href="../samples/table/byKs/index.html"
|
|
624
|
+
class="glass-panel p-5 rounded-2xl group hover:border-indigo-500/50 transition flex flex-col justify-between">
|
|
625
|
+
<div>
|
|
626
|
+
<div class="flex items-center justify-between mb-3">
|
|
627
|
+
<span class="text-xl">🌐</span>
|
|
628
|
+
<span class="text-xs text-indigo-400 font-mono group-hover:translate-x-1 transition">Open Demo
|
|
629
|
+
→</span>
|
|
630
|
+
</div>
|
|
631
|
+
<h4 class="text-base font-bold text-white mb-1 group-hover:text-indigo-300 transition">Table via window.ks
|
|
632
|
+
Sample</h4>
|
|
633
|
+
<p class="text-xs text-slate-400 leading-relaxed mb-4">
|
|
634
|
+
Mounts table using the globally attached namespace (<code
|
|
635
|
+
class="text-indigo-300 font-mono">window.ks.jsonRenderers.renderToDom</code>).
|
|
636
|
+
</p>
|
|
637
|
+
</div>
|
|
638
|
+
<div class="text-[11px] font-mono text-slate-500">samples/table/byKs/index.html</div>
|
|
639
|
+
</a>
|
|
640
|
+
|
|
641
|
+
<a href="table/index.html"
|
|
642
|
+
class="glass-panel p-5 rounded-2xl group hover:border-emerald-500/50 transition flex flex-col justify-between border-dashed border-emerald-500/40">
|
|
643
|
+
<div>
|
|
644
|
+
<div class="flex items-center justify-between mb-3">
|
|
645
|
+
<span class="text-xl">📖</span>
|
|
646
|
+
<span class="text-xs text-emerald-400 font-mono group-hover:translate-x-1 transition">Read Guide
|
|
647
|
+
→</span>
|
|
648
|
+
</div>
|
|
649
|
+
<h4 class="text-base font-bold text-white mb-1 group-hover:text-emerald-300 transition">Table Process Guide
|
|
650
|
+
</h4>
|
|
651
|
+
<p class="text-xs text-slate-400 leading-relaxed mb-4">
|
|
652
|
+
Detailed step-by-step documentation explaining table creation for beginners.
|
|
653
|
+
</p>
|
|
654
|
+
</div>
|
|
655
|
+
<div class="text-[11px] font-mono text-emerald-400/80">docs/table/index.html</div>
|
|
456
656
|
</a>
|
|
457
657
|
|
|
458
658
|
</div>
|
|
@@ -467,12 +667,14 @@
|
|
|
467
667
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
468
668
|
<div>
|
|
469
669
|
<label class="text-xs text-slate-400 mb-1 block font-mono">NPM Package:</label>
|
|
470
|
-
<pre
|
|
670
|
+
<pre
|
|
671
|
+
class="p-3 bg-slate-950 rounded-xl text-xs text-emerald-300 font-mono border border-slate-800 overflow-x-auto"><code>npm install json-renderers</code></pre>
|
|
471
672
|
</div>
|
|
472
673
|
|
|
473
674
|
<div>
|
|
474
675
|
<label class="text-xs text-slate-400 mb-1 block font-mono">ES Module CDN:</label>
|
|
475
|
-
<pre
|
|
676
|
+
<pre
|
|
677
|
+
class="p-3 bg-slate-950 rounded-xl text-xs text-emerald-300 font-mono border border-slate-800 overflow-x-auto"><code>import render from "https://cdn.jsdelivr.net/gh/keshavsoft/json-renderers@main/docs/dist/v13/min.js";</code></pre>
|
|
476
678
|
</div>
|
|
477
679
|
</div>
|
|
478
680
|
</section>
|
|
@@ -487,7 +689,8 @@
|
|
|
487
689
|
</div>
|
|
488
690
|
<div class="flex items-center gap-4 text-slate-400">
|
|
489
691
|
<a href="https://github.com/keshavsoft/json-renderers" class="hover:text-white transition">json-renderers</a>
|
|
490
|
-
<a href="https://github.com/keshavsoft/json-renderers-build"
|
|
692
|
+
<a href="https://github.com/keshavsoft/json-renderers-build"
|
|
693
|
+
class="hover:text-white transition">json-renderers-build</a>
|
|
491
694
|
<a href="https://github.com/keshavsoft/json-to-spec" class="hover:text-white transition">json-to-spec</a>
|
|
492
695
|
</div>
|
|
493
696
|
</div>
|
|
@@ -698,13 +901,13 @@
|
|
|
698
901
|
btnFormatData.addEventListener("click", () => {
|
|
699
902
|
try {
|
|
700
903
|
inputDataEl.value = JSON.stringify(JSON.parse(inputDataEl.value), null, 2);
|
|
701
|
-
} catch (e) {}
|
|
904
|
+
} catch (e) { }
|
|
702
905
|
});
|
|
703
906
|
|
|
704
907
|
btnFormatColumns.addEventListener("click", () => {
|
|
705
908
|
try {
|
|
706
909
|
inputColumnsEl.value = JSON.stringify(JSON.parse(inputColumnsEl.value), null, 2);
|
|
707
|
-
} catch (e) {}
|
|
910
|
+
} catch (e) { }
|
|
708
911
|
});
|
|
709
912
|
|
|
710
913
|
btnCopyAst.addEventListener("click", () => {
|
|
@@ -728,4 +931,5 @@
|
|
|
728
931
|
syncTypeUI();
|
|
729
932
|
</script>
|
|
730
933
|
</body>
|
|
934
|
+
|
|
731
935
|
</html>
|