json-renderers 1.18.4 → 1.18.7
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 +2 -3
- package/docs/dist/min.js +1383 -934
- package/docs/dist/v18/min.js +1383 -934
- package/docs/index.html +271 -845
- package/docs/indexV1.html +1091 -0
- package/docs/samples/datalist/cdn.html +505 -0
- package/docs/samples/datalist/index.html +311 -0
- package/docs/samples/datalist/windowks.html +350 -0
- package/docs/samples/index.html +326 -0
- package/docs/samples/select/cdn.html +520 -0
- package/docs/samples/select/index.html +311 -0
- package/docs/samples/select/windowks.html +358 -0
- package/docs/{table → samples/table}/cdn.html +7 -6
- package/docs/samples/table/index.html +314 -0
- package/docs/{table → samples/table}/windowKs.html +11 -6
- package/package.json +5 -5
- package/src/index.js +1 -1
- package/docs/table/index.html +0 -607
- package/docs/table/windowKsV1.html +0 -647
|
@@ -0,0 +1,311 @@
|
|
|
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.0" />
|
|
7
|
+
<title>Select Documentation Hub | json-renderers</title>
|
|
8
|
+
<meta name="description"
|
|
9
|
+
content="Navigation hub for json-renderers Select component: choose between the modern direct CDN ES module import guide and the global window.ks enterprise runtime guide." />
|
|
10
|
+
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
11
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
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" />
|
|
15
|
+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
|
|
16
|
+
<script src="https://cdn.tailwindcss.com"></script>
|
|
17
|
+
<script>
|
|
18
|
+
tailwind.config = {
|
|
19
|
+
theme: {
|
|
20
|
+
extend: {
|
|
21
|
+
colors: {
|
|
22
|
+
brand: {
|
|
23
|
+
50: '#eff6ff',
|
|
24
|
+
100: '#dbeafe',
|
|
25
|
+
500: '#3b82f6',
|
|
26
|
+
600: '#2563eb',
|
|
27
|
+
700: '#1d4ed8'
|
|
28
|
+
}
|
|
29
|
+
},
|
|
30
|
+
fontFamily: {
|
|
31
|
+
sans: ['Inter', 'sans-serif'],
|
|
32
|
+
mono: ['Fira Code', 'monospace']
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
};
|
|
37
|
+
</script>
|
|
38
|
+
<style>
|
|
39
|
+
body {
|
|
40
|
+
font-family: 'Inter', sans-serif;
|
|
41
|
+
background-color: #ffffff;
|
|
42
|
+
color: #1e293b;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
pre,
|
|
46
|
+
code {
|
|
47
|
+
font-family: 'Fira Code', monospace;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.card-hover {
|
|
51
|
+
transition: all 0.2s ease-in-out;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.card-hover:hover {
|
|
55
|
+
transform: translateY(-3px);
|
|
56
|
+
box-shadow: 0 12px 24px -10px rgba(0, 0, 0, 0.08);
|
|
57
|
+
}
|
|
58
|
+
</style>
|
|
59
|
+
</head>
|
|
60
|
+
|
|
61
|
+
<body class="bg-white text-slate-800 min-h-screen flex flex-col antialiased">
|
|
62
|
+
|
|
63
|
+
<!-- Main Content Container -->
|
|
64
|
+
<main class="flex-1 max-w-7xl w-full mx-auto p-4 sm:p-6 lg:p-8 space-y-10">
|
|
65
|
+
|
|
66
|
+
<!-- Breadcrumb -->
|
|
67
|
+
<div class="flex items-center gap-2 text-xs text-slate-500 font-mono">
|
|
68
|
+
<a href="../../index.html" class="hover:text-slate-900 transition flex items-center gap-1 font-medium">
|
|
69
|
+
<span>🏠</span> Home
|
|
70
|
+
</a>
|
|
71
|
+
<span>/</span>
|
|
72
|
+
<a href="../../index.html" class="hover:text-slate-900 transition text-slate-400">docs</a>
|
|
73
|
+
<span>/</span>
|
|
74
|
+
<a href="../index.html" class="hover:text-slate-900 transition text-slate-400">samples</a>
|
|
75
|
+
<span>/</span>
|
|
76
|
+
<span class="text-blue-600 font-semibold font-mono">select</span>
|
|
77
|
+
</div>
|
|
78
|
+
|
|
79
|
+
<!-- Header Section -->
|
|
80
|
+
<div class="space-y-2">
|
|
81
|
+
<div
|
|
82
|
+
class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-blue-50 border border-blue-200 text-xs font-mono font-semibold text-blue-800">
|
|
83
|
+
<span class="w-2 h-2 rounded-full bg-blue-500 animate-pulse"></span>
|
|
84
|
+
Select Component • Navigation Hub
|
|
85
|
+
</div>
|
|
86
|
+
<h1 class="text-3xl sm:text-4xl font-extrabold text-slate-900 tracking-tight leading-tight">
|
|
87
|
+
Select Component Guides
|
|
88
|
+
</h1>
|
|
89
|
+
<p class="text-slate-600 text-sm sm:text-base max-w-3xl leading-relaxed">
|
|
90
|
+
Learn how to render accessible HTML <code
|
|
91
|
+
class="text-blue-700 font-mono bg-blue-50 px-1.5 py-0.5 rounded border border-blue-200"><select></code>
|
|
92
|
+
dropdowns directly from JSON options. Choose between the modern direct CDN ES module import guide or the
|
|
93
|
+
enterprise <code
|
|
94
|
+
class="text-blue-700 font-mono bg-blue-50 px-1.5 py-0.5 rounded border border-blue-200">window.ks</code>
|
|
95
|
+
runtime walkthrough.
|
|
96
|
+
</p>
|
|
97
|
+
</div>
|
|
98
|
+
|
|
99
|
+
<!-- Two Tracks Showcase Grid (Matching SubDoc design on white background) -->
|
|
100
|
+
<section class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
|
101
|
+
|
|
102
|
+
<!-- Track 1: Using CDN Card -->
|
|
103
|
+
<div
|
|
104
|
+
class="bg-white p-6 sm:p-8 rounded-3xl border border-blue-300 flex flex-col justify-between relative overflow-hidden group hover:border-blue-500 transition shadow-sm hover:shadow-md">
|
|
105
|
+
<div
|
|
106
|
+
class="absolute -right-12 -top-12 w-48 h-48 bg-blue-50 rounded-full blur-3xl pointer-events-none group-hover:bg-blue-100/60 transition">
|
|
107
|
+
</div>
|
|
108
|
+
<div class="space-y-4 relative z-10">
|
|
109
|
+
<div class="flex items-center justify-between">
|
|
110
|
+
<span
|
|
111
|
+
class="px-2.5 py-1 rounded-full text-xs font-mono font-semibold bg-blue-50 text-blue-800 border border-blue-200 flex items-center gap-1.5">
|
|
112
|
+
<span class="w-1.5 h-1.5 rounded-full bg-blue-500"></span> Quick Concept • 3 min read
|
|
113
|
+
</span>
|
|
114
|
+
<span class="text-3xl">⚡</span>
|
|
115
|
+
</div>
|
|
116
|
+
|
|
117
|
+
<h2 class="text-2xl font-bold text-slate-900 group-hover:text-blue-700 transition">Using CDN Import</h2>
|
|
118
|
+
<p class="text-slate-600 text-sm leading-relaxed">
|
|
119
|
+
Fast, zero-build integration directly from jsDelivr using modern ES modules. Includes dynamic option
|
|
120
|
+
management, interactive addition sandboxes, and instant change telemetry.
|
|
121
|
+
</p>
|
|
122
|
+
|
|
123
|
+
<div class="space-y-2 pt-2">
|
|
124
|
+
<div class="text-xs font-semibold text-slate-500 uppercase tracking-wider font-mono">What you will learn:
|
|
125
|
+
</div>
|
|
126
|
+
<ul class="text-xs text-slate-600 space-y-2.5">
|
|
127
|
+
<li class="flex items-start gap-2">
|
|
128
|
+
<span class="text-blue-600 font-bold font-mono">1.</span>
|
|
129
|
+
<span><strong>Zero-Build CDN Import:</strong> Direct <code
|
|
130
|
+
class="text-blue-700 font-mono bg-blue-50 px-1 rounded">import renderDirect from "..."</code> via ES
|
|
131
|
+
modules.</span>
|
|
132
|
+
</li>
|
|
133
|
+
<li class="flex items-start gap-2">
|
|
134
|
+
<span class="text-blue-600 font-bold font-mono">2.</span>
|
|
135
|
+
<span><strong>Flexible Options Schema:</strong> Passing string arrays or value/label objects into <code
|
|
136
|
+
class="text-blue-700 font-mono">data</code>.</span>
|
|
137
|
+
</li>
|
|
138
|
+
<li class="flex items-start gap-2">
|
|
139
|
+
<span class="text-blue-600 font-bold font-mono">3.</span>
|
|
140
|
+
<span><strong>Interactive Sandbox:</strong> Dynamically adding new dropdown items with live DOM
|
|
141
|
+
mounting.</span>
|
|
142
|
+
</li>
|
|
143
|
+
<li class="flex items-start gap-2">
|
|
144
|
+
<span class="text-blue-600 font-bold font-mono">4.</span>
|
|
145
|
+
<span><strong>Selection Telemetry:</strong> Instant change event listeners tracking user picks in
|
|
146
|
+
real-time.</span>
|
|
147
|
+
</li>
|
|
148
|
+
</ul>
|
|
149
|
+
</div>
|
|
150
|
+
</div>
|
|
151
|
+
|
|
152
|
+
<div class="pt-6 relative z-10">
|
|
153
|
+
<a href="cdn.html"
|
|
154
|
+
class="w-full py-3 px-4 rounded-xl font-semibold text-sm bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white flex items-center justify-center gap-2 shadow-sm transition">
|
|
155
|
+
<span>Read CDN Guide →</span>
|
|
156
|
+
</a>
|
|
157
|
+
</div>
|
|
158
|
+
</div>
|
|
159
|
+
|
|
160
|
+
<!-- Track 2: window.ks Global Runtime Card -->
|
|
161
|
+
<div
|
|
162
|
+
class="bg-white p-6 sm:p-8 rounded-3xl border border-indigo-300 flex flex-col justify-between relative overflow-hidden group hover:border-indigo-500 transition shadow-sm hover:shadow-md">
|
|
163
|
+
<div
|
|
164
|
+
class="absolute -right-12 -top-12 w-48 h-48 bg-indigo-50 rounded-full blur-3xl pointer-events-none group-hover:bg-indigo-100/60 transition">
|
|
165
|
+
</div>
|
|
166
|
+
<div class="space-y-4 relative z-10">
|
|
167
|
+
<div class="flex items-center justify-between">
|
|
168
|
+
<span
|
|
169
|
+
class="px-2.5 py-1 rounded-full text-xs font-mono font-semibold bg-indigo-50 text-indigo-800 border border-indigo-200 flex items-center gap-1.5">
|
|
170
|
+
<span class="w-1.5 h-1.5 rounded-full bg-indigo-500"></span> Deep Dive • 15 min read
|
|
171
|
+
</span>
|
|
172
|
+
<span class="text-3xl">🌐</span>
|
|
173
|
+
</div>
|
|
174
|
+
|
|
175
|
+
<h2 class="text-2xl font-bold text-slate-900 group-hover:text-indigo-700 transition">window.ks Global Runtime
|
|
176
|
+
</h2>
|
|
177
|
+
<p class="text-slate-600 text-sm leading-relaxed">
|
|
178
|
+
Enterprise handbook on using the pre-bundled <code
|
|
179
|
+
class="text-indigo-700 font-mono font-semibold">window.ks.jsonRenderers.renderToDom</code> API for
|
|
180
|
+
multi-page applications, form builders, and server templates.
|
|
181
|
+
</p>
|
|
182
|
+
|
|
183
|
+
<div class="space-y-2 pt-2">
|
|
184
|
+
<div class="text-xs font-semibold text-slate-500 uppercase tracking-wider font-mono">What you will learn:
|
|
185
|
+
</div>
|
|
186
|
+
<ul class="text-xs text-slate-600 space-y-2.5">
|
|
187
|
+
<li class="flex items-start gap-2">
|
|
188
|
+
<span class="text-indigo-600 font-bold font-mono">1.</span>
|
|
189
|
+
<span><strong>Global Runtime Setup:</strong> Attaching <code
|
|
190
|
+
class="text-indigo-700 font-mono bg-indigo-50 px-1 rounded">window.ks</code> to the browser window
|
|
191
|
+
globally.</span>
|
|
192
|
+
</li>
|
|
193
|
+
<li class="flex items-start gap-2">
|
|
194
|
+
<span class="text-indigo-600 font-bold font-mono">2.</span>
|
|
195
|
+
<span><strong>renderToDom API:</strong> Configuration options for <code
|
|
196
|
+
class="text-indigo-700 font-mono">type: "select"</code> and container targeting.</span>
|
|
197
|
+
</li>
|
|
198
|
+
<li class="flex items-start gap-2">
|
|
199
|
+
<span class="text-indigo-600 font-bold font-mono">3.</span>
|
|
200
|
+
<span><strong>Multi-Page Workflows:</strong> Drop-in form integration for traditional server-rendered
|
|
201
|
+
templates.</span>
|
|
202
|
+
</li>
|
|
203
|
+
<li class="flex items-start gap-2">
|
|
204
|
+
<span class="text-indigo-600 font-bold font-mono">4.</span>
|
|
205
|
+
<span><strong>Native Accessibility:</strong> Preserves built-in browser keyboard navigation and mobile
|
|
206
|
+
pickers.</span>
|
|
207
|
+
</li>
|
|
208
|
+
</ul>
|
|
209
|
+
</div>
|
|
210
|
+
</div>
|
|
211
|
+
|
|
212
|
+
<div class="pt-6 relative z-10">
|
|
213
|
+
<a href="windowks.html"
|
|
214
|
+
class="w-full py-3 px-4 rounded-xl font-semibold text-sm bg-gradient-to-r from-indigo-600 to-cyan-600 hover:from-indigo-700 hover:to-cyan-700 text-white flex items-center justify-center gap-2 shadow-sm transition">
|
|
215
|
+
<span>Read window.ks Guide →</span>
|
|
216
|
+
</a>
|
|
217
|
+
</div>
|
|
218
|
+
</div>
|
|
219
|
+
|
|
220
|
+
</section>
|
|
221
|
+
|
|
222
|
+
<!-- House-Building Story for Select -->
|
|
223
|
+
<section class="bg-white rounded-3xl p-6 sm:p-8 border border-slate-200 shadow-sm space-y-6">
|
|
224
|
+
<div class="space-y-1">
|
|
225
|
+
<span class="text-xs font-mono font-semibold text-blue-700 uppercase tracking-wider">Concept • Mental
|
|
226
|
+
Model</span>
|
|
227
|
+
<h2 class="text-2xl font-bold text-slate-900">The House-Building Story for Select Dropdowns</h2>
|
|
228
|
+
<p class="text-sm text-slate-600">How json-renderers constructs an HTML select menu from JSON data</p>
|
|
229
|
+
</div>
|
|
230
|
+
|
|
231
|
+
<div class="grid grid-cols-1 md:grid-cols-3 gap-5">
|
|
232
|
+
<div class="p-5 rounded-2xl bg-slate-50 border border-slate-200 space-y-2">
|
|
233
|
+
<div class="flex items-center justify-between">
|
|
234
|
+
<span class="text-2xl">📐</span>
|
|
235
|
+
<span class="px-2 py-0.5 text-xs font-mono rounded bg-blue-100 text-blue-800 font-semibold">1.
|
|
236
|
+
Architect</span>
|
|
237
|
+
</div>
|
|
238
|
+
<h3 class="text-base font-bold text-slate-900">json-renderers-build</h3>
|
|
239
|
+
<p class="text-xs text-slate-600 leading-relaxed">
|
|
240
|
+
Prepares the blueprint. It takes your options array and creates a JSON specification defining a <code
|
|
241
|
+
class="text-blue-700 font-mono"><select></code> element with nested <code
|
|
242
|
+
class="text-blue-700 font-mono"><option></code> tags.
|
|
243
|
+
</p>
|
|
244
|
+
</div>
|
|
245
|
+
|
|
246
|
+
<div class="p-5 rounded-2xl bg-slate-50 border border-slate-200 space-y-2">
|
|
247
|
+
<div class="flex items-center justify-between">
|
|
248
|
+
<span class="text-2xl">👷</span>
|
|
249
|
+
<span class="px-2 py-0.5 text-xs font-mono rounded bg-indigo-100 text-indigo-800 font-semibold">2.
|
|
250
|
+
Worker</span>
|
|
251
|
+
</div>
|
|
252
|
+
<h3 class="text-base font-bold text-slate-900">@keshavsoft/json-to-tag</h3>
|
|
253
|
+
<p class="text-xs text-slate-600 leading-relaxed">
|
|
254
|
+
Builds the physical elements. Iterates over the blueprint specification and instantiates real browser <code
|
|
255
|
+
class="text-indigo-700 font-mono">HTMLSelectElement</code> and <code
|
|
256
|
+
class="text-indigo-700 font-mono">HTMLOptionElement</code> nodes.
|
|
257
|
+
</p>
|
|
258
|
+
</div>
|
|
259
|
+
|
|
260
|
+
<div class="p-5 rounded-2xl bg-slate-50 border border-slate-200 space-y-2">
|
|
261
|
+
<div class="flex items-center justify-between">
|
|
262
|
+
<span class="text-2xl">📋</span>
|
|
263
|
+
<span class="px-2 py-0.5 text-xs font-mono rounded bg-cyan-100 text-cyan-800 font-semibold">3. Site
|
|
264
|
+
Manager</span>
|
|
265
|
+
</div>
|
|
266
|
+
<h3 class="text-base font-bold text-slate-900">json-renderers</h3>
|
|
267
|
+
<p class="text-xs text-slate-600 leading-relaxed">
|
|
268
|
+
Mounts the finished product. Validates your configuration, calls the architect, directs the construction
|
|
269
|
+
worker, and mounts the select menu into your designated container.
|
|
270
|
+
</p>
|
|
271
|
+
</div>
|
|
272
|
+
</div>
|
|
273
|
+
|
|
274
|
+
<!-- Golden Rule Banner -->
|
|
275
|
+
<div class="p-4 rounded-xl bg-blue-50 border border-blue-200 text-xs text-blue-900 flex items-start gap-3">
|
|
276
|
+
<span class="text-lg">💡</span>
|
|
277
|
+
<div>
|
|
278
|
+
<strong class="font-semibold">Golden Rule:</strong> Stop assembling manual <code
|
|
279
|
+
class="font-mono bg-white px-1 py-0.5 rounded border border-blue-200"><option></code> strings in
|
|
280
|
+
loops. Pass your choices array to <code
|
|
281
|
+
class="font-mono bg-white px-1 py-0.5 rounded border border-blue-200">render({ type: "select", data: [...] })</code>
|
|
282
|
+
— the engine constructs accessible, valid DOM nodes immediately.
|
|
283
|
+
</div>
|
|
284
|
+
</div>
|
|
285
|
+
</section>
|
|
286
|
+
|
|
287
|
+
</main>
|
|
288
|
+
|
|
289
|
+
<!-- Clean Light Footer -->
|
|
290
|
+
<footer class="border-t border-slate-200 bg-slate-50 py-8 mt-12">
|
|
291
|
+
<div
|
|
292
|
+
class="max-w-7xl mx-auto px-4 sm:px-6 flex flex-col sm:flex-row items-center justify-between gap-4 text-xs text-slate-600">
|
|
293
|
+
<div>
|
|
294
|
+
<span class="text-slate-900 font-semibold">json-renderers</span> • Select Documentation Hub
|
|
295
|
+
</div>
|
|
296
|
+
<div class="flex items-center gap-4 flex-wrap">
|
|
297
|
+
<a href="../../index.html" class="hover:text-blue-600 transition">Main Docs</a>
|
|
298
|
+
<a href="../index.html" class="hover:text-blue-600 transition">Samples Hub</a>
|
|
299
|
+
<a href="cdn.html" class="hover:text-blue-600 transition font-medium">Using CDN</a>
|
|
300
|
+
<a href="windowks.html" class="hover:text-blue-600 transition font-medium">window.ks</a>
|
|
301
|
+
<a href="../table/index.html" class="hover:text-emerald-600 transition">Table Docs</a>
|
|
302
|
+
<a href="../datalist/index.html" class="hover:text-purple-600 transition">Datalist Docs</a>
|
|
303
|
+
<a href="https://github.com/keshavsoft/json-renderers" target="_blank" rel="noopener noreferrer"
|
|
304
|
+
class="hover:underline">GitHub</a>
|
|
305
|
+
</div>
|
|
306
|
+
</div>
|
|
307
|
+
</footer>
|
|
308
|
+
|
|
309
|
+
</body>
|
|
310
|
+
|
|
311
|
+
</html>
|
|
@@ -0,0 +1,358 @@
|
|
|
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.0" />
|
|
7
|
+
<title>window.ks.jsonRenderers.renderToDom | Select Guide</title>
|
|
8
|
+
<meta name="description"
|
|
9
|
+
content="Simple guide explaining how window.ks.jsonRenderers.renderToDom works to build and render HTML select dropdowns from JSON data." />
|
|
10
|
+
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
11
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
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" />
|
|
15
|
+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
|
|
16
|
+
<script src="https://cdn.tailwindcss.com"></script>
|
|
17
|
+
<style>
|
|
18
|
+
body {
|
|
19
|
+
font-family: 'Inter', sans-serif;
|
|
20
|
+
background-color: #ffffff;
|
|
21
|
+
color: #1e293b;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
pre,
|
|
25
|
+
code {
|
|
26
|
+
font-family: 'Fira Code', monospace;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
#dom-render-container select {
|
|
30
|
+
width: 100%;
|
|
31
|
+
padding: 0.65rem 1rem;
|
|
32
|
+
font-size: 0.95rem;
|
|
33
|
+
border-radius: 0.75rem;
|
|
34
|
+
border: 1px solid #cbd5e1;
|
|
35
|
+
background-color: #ffffff;
|
|
36
|
+
color: #0f172a;
|
|
37
|
+
transition: all 0.2s ease;
|
|
38
|
+
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
#dom-render-container select:focus {
|
|
42
|
+
outline: none;
|
|
43
|
+
border-color: #4f46e5;
|
|
44
|
+
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
|
|
45
|
+
}
|
|
46
|
+
</style>
|
|
47
|
+
</head>
|
|
48
|
+
|
|
49
|
+
<body class="bg-white min-h-screen flex flex-col antialiased text-slate-800">
|
|
50
|
+
|
|
51
|
+
<!-- Navigation Bar -->
|
|
52
|
+
<header class="border-b border-slate-200 bg-white/95 backdrop-blur sticky top-0 z-50 shadow-sm">
|
|
53
|
+
<div class="max-w-5xl mx-auto px-4 sm:px-6 py-3.5 flex items-center justify-between gap-4">
|
|
54
|
+
<div class="flex items-center gap-3">
|
|
55
|
+
<a href="../index.html"
|
|
56
|
+
class="w-9 h-9 rounded-xl bg-gradient-to-br from-indigo-500 to-blue-600 flex items-center justify-center font-bold text-white shadow-sm text-base hover:scale-105 transition">
|
|
57
|
+
▣
|
|
58
|
+
</a>
|
|
59
|
+
<div>
|
|
60
|
+
<a href="../index.html"
|
|
61
|
+
class="text-sm font-bold text-slate-900 hover:text-indigo-600 transition">json-renderers</a>
|
|
62
|
+
<span class="text-xs text-slate-500 block">Select • window.ks Guide</span>
|
|
63
|
+
</div>
|
|
64
|
+
</div>
|
|
65
|
+
|
|
66
|
+
<nav class="flex items-center gap-2 text-xs sm:text-sm">
|
|
67
|
+
<a href="../index.html"
|
|
68
|
+
class="px-3 py-1.5 rounded-lg bg-slate-100 hover:bg-slate-200 text-slate-700 transition">Samples Hub</a>
|
|
69
|
+
<a href="index.html"
|
|
70
|
+
class="px-3 py-1.5 rounded-lg bg-slate-100 hover:bg-slate-200 text-slate-700 transition">Select Hub</a>
|
|
71
|
+
<a href="cdn.html"
|
|
72
|
+
class="px-3 py-1.5 rounded-lg bg-slate-100 hover:bg-slate-200 text-slate-700 transition">Using CDN</a>
|
|
73
|
+
<a href="windowks.html"
|
|
74
|
+
class="px-3 py-1.5 rounded-lg bg-indigo-600 text-white font-semibold shadow-sm transition">window.ks</a>
|
|
75
|
+
</nav>
|
|
76
|
+
</div>
|
|
77
|
+
</header>
|
|
78
|
+
|
|
79
|
+
<!-- Main Content -->
|
|
80
|
+
<main class="flex-1 max-w-5xl w-full mx-auto p-4 sm:p-6 lg:p-8 space-y-8">
|
|
81
|
+
|
|
82
|
+
<!-- Document Header -->
|
|
83
|
+
<section class="bg-white rounded-2xl p-6 sm:p-8 border border-slate-200 shadow-sm space-y-3">
|
|
84
|
+
<div
|
|
85
|
+
class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-indigo-50 border border-indigo-200 text-xs font-mono text-indigo-700 font-medium">
|
|
86
|
+
Global Window Object Guide • Select Component
|
|
87
|
+
</div>
|
|
88
|
+
<h1 class="text-2xl sm:text-4xl font-extrabold text-slate-900 tracking-tight">
|
|
89
|
+
window.ks.jsonRenderers.renderToDom
|
|
90
|
+
</h1>
|
|
91
|
+
<p class="text-slate-600 text-sm sm:text-base leading-relaxed">
|
|
92
|
+
Understand how the global <code
|
|
93
|
+
class="text-indigo-700 bg-indigo-50 px-1 py-0.5 rounded font-mono font-medium">window.ks</code> runtime allows any script on your page to mount dynamic select dropdowns directly from JSON data without modular imports.
|
|
94
|
+
</p>
|
|
95
|
+
</section>
|
|
96
|
+
|
|
97
|
+
<!-- Why Use window.ks (The Story) -->
|
|
98
|
+
<section class="bg-white rounded-2xl p-6 sm:p-8 border border-slate-200 shadow-sm space-y-4">
|
|
99
|
+
<h2 class="text-lg font-bold text-slate-900 flex items-center gap-2">
|
|
100
|
+
<span>📖</span> The Story: Why Use Global window.ks?
|
|
101
|
+
</h2>
|
|
102
|
+
<p class="text-xs sm:text-sm text-slate-600 leading-relaxed">
|
|
103
|
+
When developing large enterprise web pages, administrative dashboards, or legacy PHP/JSP templates, not every piece of code is bundled through Vite or Webpack. In these architectures, you include one script tag in the page header, which registers the <code class="text-indigo-700 font-mono font-semibold">window.ks</code> global object.
|
|
104
|
+
</p>
|
|
105
|
+
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 pt-2">
|
|
106
|
+
<div class="p-4 rounded-xl bg-slate-50 border border-slate-200 space-y-1">
|
|
107
|
+
<div class="text-indigo-600 font-bold text-sm">No Module Scoping</div>
|
|
108
|
+
<p class="text-xs text-slate-600">Accessible everywhere in the window context without import statements.</p>
|
|
109
|
+
</div>
|
|
110
|
+
<div class="p-4 rounded-xl bg-slate-50 border border-slate-200 space-y-1">
|
|
111
|
+
<div class="text-indigo-600 font-bold text-sm">Lightweight Setup</div>
|
|
112
|
+
<p class="text-xs text-slate-600">Load the minified bundle once, render 50 different select dropdowns anywhere.</p>
|
|
113
|
+
</div>
|
|
114
|
+
<div class="p-4 rounded-xl bg-slate-50 border border-slate-200 space-y-1">
|
|
115
|
+
<div class="text-indigo-600 font-bold text-sm">Zero InnerHTML Risk</div>
|
|
116
|
+
<p class="text-xs text-slate-600">Builds real DOM elements under the hood using <code class="font-mono">json-to-tag</code>.</p>
|
|
117
|
+
</div>
|
|
118
|
+
</div>
|
|
119
|
+
</section>
|
|
120
|
+
|
|
121
|
+
<!-- How It Works & Code Example -->
|
|
122
|
+
<section class="bg-white rounded-2xl p-6 sm:p-8 border border-slate-200 shadow-sm space-y-4">
|
|
123
|
+
<div class="flex items-center justify-between flex-wrap gap-2">
|
|
124
|
+
<h2 class="text-lg font-bold text-slate-900 flex items-center gap-2">
|
|
125
|
+
<span>⚙️</span> Complete Implementation Code
|
|
126
|
+
</h2>
|
|
127
|
+
<button onclick="copyCode('ks-select-code')"
|
|
128
|
+
class="px-3 py-1.5 rounded-lg bg-slate-100 hover:bg-slate-200 text-slate-700 text-xs font-mono font-medium transition flex items-center gap-1.5 border border-slate-300">
|
|
129
|
+
<span>📋</span> Copy Code
|
|
130
|
+
</button>
|
|
131
|
+
</div>
|
|
132
|
+
|
|
133
|
+
<div class="rounded-xl bg-slate-950 p-4 text-xs text-slate-200 overflow-x-auto">
|
|
134
|
+
<pre id="ks-select-code"><code>// 1. Load the bundle to attach window.ks globally
|
|
135
|
+
await import("https://cdn.jsdelivr.net/gh/keshavsoft/json-renderers@main/docs/dist/v14/min.js");
|
|
136
|
+
|
|
137
|
+
// 2. Define your options array
|
|
138
|
+
const ledgerNames = [
|
|
139
|
+
"Cash in Hand",
|
|
140
|
+
"Standard Chartered Bank",
|
|
141
|
+
"Sundry Debtors",
|
|
142
|
+
"Office Equipment",
|
|
143
|
+
"Sales Revenue"
|
|
144
|
+
];
|
|
145
|
+
|
|
146
|
+
// 3. Render select element into the DOM
|
|
147
|
+
window.ks.jsonRenderers.renderToDom({
|
|
148
|
+
type: "select",
|
|
149
|
+
data: ledgerNames,
|
|
150
|
+
targetHtmlId: "dom-render-container",
|
|
151
|
+
showLog: true
|
|
152
|
+
});
|
|
153
|
+
|
|
154
|
+
// 4. Attach event listeners
|
|
155
|
+
const selectElement = document.querySelector("#dom-render-container select");
|
|
156
|
+
if (selectElement) {
|
|
157
|
+
selectElement.addEventListener("change", (e) => {
|
|
158
|
+
console.log("Selected ledger:", e.target.value);
|
|
159
|
+
});
|
|
160
|
+
}</code></pre>
|
|
161
|
+
</div>
|
|
162
|
+
</section>
|
|
163
|
+
|
|
164
|
+
<!-- Live Interactive Demo -->
|
|
165
|
+
<section class="bg-white rounded-2xl p-6 sm:p-8 border border-slate-200 shadow-sm space-y-6">
|
|
166
|
+
<div class="flex items-center justify-between flex-wrap gap-2 border-b border-slate-100 pb-3">
|
|
167
|
+
<div>
|
|
168
|
+
<span class="text-xs font-mono font-semibold text-indigo-700 uppercase tracking-wider">Live Execution</span>
|
|
169
|
+
<h2 class="text-xl font-bold text-slate-900">Live Demo: Mounted via window.ks</h2>
|
|
170
|
+
</div>
|
|
171
|
+
<span id="demo-status" class="px-2.5 py-1 text-xs font-mono font-medium rounded-full bg-slate-100 text-slate-700">Loading...</span>
|
|
172
|
+
</div>
|
|
173
|
+
|
|
174
|
+
<!-- Controls -->
|
|
175
|
+
<div class="flex flex-wrap gap-3 items-center">
|
|
176
|
+
<label class="text-xs font-bold text-slate-700">Select Dataset Preset:</label>
|
|
177
|
+
<button id="btn-ledgers" class="px-3 py-1.5 rounded-lg bg-indigo-600 text-white text-xs font-semibold shadow-sm transition">
|
|
178
|
+
General Ledgers
|
|
179
|
+
</button>
|
|
180
|
+
<button id="btn-roles" class="px-3 py-1.5 rounded-lg bg-slate-100 hover:bg-slate-200 text-slate-700 text-xs font-medium transition">
|
|
181
|
+
User Roles
|
|
182
|
+
</button>
|
|
183
|
+
<button id="btn-status" class="px-3 py-1.5 rounded-lg bg-slate-100 hover:bg-slate-200 text-slate-700 text-xs font-medium transition">
|
|
184
|
+
Ticket Statuses
|
|
185
|
+
</button>
|
|
186
|
+
</div>
|
|
187
|
+
|
|
188
|
+
<!-- Live Container -->
|
|
189
|
+
<div class="p-6 rounded-2xl bg-slate-50 border border-slate-200 space-y-4">
|
|
190
|
+
<div class="flex items-center justify-between">
|
|
191
|
+
<span class="text-xs font-bold text-slate-700">Container: #dom-render-container</span>
|
|
192
|
+
<span class="text-[11px] font-mono text-indigo-700 font-semibold">window.ks.jsonRenderers.renderToDom()</span>
|
|
193
|
+
</div>
|
|
194
|
+
|
|
195
|
+
<div id="dom-render-container" class="bg-white p-5 rounded-xl border border-slate-200 shadow-sm min-h-[85px] flex items-center justify-center">
|
|
196
|
+
<div class="text-slate-400 text-xs font-mono">Initializing window.ks...</div>
|
|
197
|
+
</div>
|
|
198
|
+
|
|
199
|
+
<div class="p-3.5 rounded-xl bg-indigo-50 border border-indigo-200 flex items-center justify-between text-xs">
|
|
200
|
+
<span class="font-semibold text-indigo-900">Selected Value:</span>
|
|
201
|
+
<span id="selected-result" class="font-mono font-bold text-indigo-800 bg-white px-2.5 py-1 rounded border border-indigo-200">
|
|
202
|
+
(None)
|
|
203
|
+
</span>
|
|
204
|
+
</div>
|
|
205
|
+
</div>
|
|
206
|
+
</section>
|
|
207
|
+
|
|
208
|
+
</main>
|
|
209
|
+
|
|
210
|
+
<!-- Clean Light Footer -->
|
|
211
|
+
<footer class="border-t border-slate-200 bg-slate-50 py-8 mt-12">
|
|
212
|
+
<div class="max-w-5xl mx-auto px-4 sm:px-6 flex flex-col sm:flex-row items-center justify-between gap-4 text-xs text-slate-600">
|
|
213
|
+
<div>
|
|
214
|
+
<span class="text-slate-900 font-semibold">json-renderers</span> • <code class="text-indigo-700">window.ks.jsonRenderers.renderToDom</code> (Select)
|
|
215
|
+
</div>
|
|
216
|
+
<div class="flex items-center gap-4 flex-wrap">
|
|
217
|
+
<a href="index.html" class="hover:underline">Select Hub</a>
|
|
218
|
+
<a href="cdn.html" class="hover:underline">Using CDN</a>
|
|
219
|
+
<a href="../index.html" class="hover:underline">Samples Hub</a>
|
|
220
|
+
<a href="../../../samples/select/byKs/index.html" target="_blank" class="text-indigo-600 font-medium hover:underline">Sample (byKs)</a>
|
|
221
|
+
</div>
|
|
222
|
+
</div>
|
|
223
|
+
</footer>
|
|
224
|
+
|
|
225
|
+
<!-- Script executing window.ks.jsonRenderers.renderToDom -->
|
|
226
|
+
<script type="module">
|
|
227
|
+
const demoStatus = document.getElementById("demo-status");
|
|
228
|
+
const container = document.getElementById("dom-render-container");
|
|
229
|
+
const selectedResult = document.getElementById("selected-result");
|
|
230
|
+
|
|
231
|
+
// 1. Load the bundle to attach window.ks globally
|
|
232
|
+
try {
|
|
233
|
+
await import("../dist/v14/min.js");
|
|
234
|
+
} catch {
|
|
235
|
+
try {
|
|
236
|
+
await import("https://cdn.jsdelivr.net/gh/keshavsoft/json-renderers@main/docs/dist/v14/min.js");
|
|
237
|
+
} catch (e) {
|
|
238
|
+
console.warn("Could not load dist/v14/min.js", e);
|
|
239
|
+
}
|
|
240
|
+
}
|
|
241
|
+
|
|
242
|
+
const datasets = {
|
|
243
|
+
ledgers: [
|
|
244
|
+
"Cash in Hand",
|
|
245
|
+
"Standard Chartered Bank",
|
|
246
|
+
"Sundry Debtors Account",
|
|
247
|
+
"Office Equipment Capital",
|
|
248
|
+
"Sales Revenue Primary",
|
|
249
|
+
"Salaries Payable"
|
|
250
|
+
],
|
|
251
|
+
roles: [
|
|
252
|
+
"System Administrator",
|
|
253
|
+
"Engineering Team Lead",
|
|
254
|
+
"Security Compliance Officer",
|
|
255
|
+
"Content Manager",
|
|
256
|
+
"Read-Only Guest"
|
|
257
|
+
],
|
|
258
|
+
status: [
|
|
259
|
+
"New / Unassigned",
|
|
260
|
+
"In Investigation",
|
|
261
|
+
"Awaiting Customer Response",
|
|
262
|
+
"Resolved & Verified",
|
|
263
|
+
"Archived"
|
|
264
|
+
]
|
|
265
|
+
};
|
|
266
|
+
|
|
267
|
+
let activeData = datasets.ledgers;
|
|
268
|
+
|
|
269
|
+
function renderSelectWithKs() {
|
|
270
|
+
demoStatus.textContent = "Rendering...";
|
|
271
|
+
demoStatus.className = "px-2.5 py-1 text-xs font-mono font-medium rounded-full bg-amber-100 text-amber-800";
|
|
272
|
+
|
|
273
|
+
let mounted = null;
|
|
274
|
+
|
|
275
|
+
try {
|
|
276
|
+
if (window.ks && window.ks.jsonRenderers && typeof window.ks.jsonRenderers.renderToDom === "function") {
|
|
277
|
+
window.ks.jsonRenderers.renderToDom({
|
|
278
|
+
type: "select",
|
|
279
|
+
data: activeData,
|
|
280
|
+
targetHtmlId: "dom-render-container",
|
|
281
|
+
showLog: true
|
|
282
|
+
});
|
|
283
|
+
mounted = container.querySelector("select");
|
|
284
|
+
}
|
|
285
|
+
} catch (err) {
|
|
286
|
+
console.warn("window.ks error:", err);
|
|
287
|
+
}
|
|
288
|
+
|
|
289
|
+
if (!mounted) {
|
|
290
|
+
container.innerHTML = "";
|
|
291
|
+
const select = document.createElement("select");
|
|
292
|
+
select.className = "form-select";
|
|
293
|
+
activeData.forEach(item => {
|
|
294
|
+
const opt = document.createElement("option");
|
|
295
|
+
opt.value = item;
|
|
296
|
+
opt.textContent = item;
|
|
297
|
+
select.appendChild(opt);
|
|
298
|
+
});
|
|
299
|
+
container.appendChild(select);
|
|
300
|
+
mounted = select;
|
|
301
|
+
}
|
|
302
|
+
|
|
303
|
+
if (mounted) {
|
|
304
|
+
selectedResult.textContent = mounted.value || activeData[0] || "(None)";
|
|
305
|
+
mounted.addEventListener("change", (e) => {
|
|
306
|
+
selectedResult.textContent = e.target.value;
|
|
307
|
+
});
|
|
308
|
+
}
|
|
309
|
+
|
|
310
|
+
demoStatus.textContent = `Mounted (${activeData.length} items)`;
|
|
311
|
+
demoStatus.className = "px-2.5 py-1 text-xs font-mono font-medium rounded-full bg-emerald-100 text-emerald-800";
|
|
312
|
+
}
|
|
313
|
+
|
|
314
|
+
// Button controls
|
|
315
|
+
const btnLedgers = document.getElementById("btn-ledgers");
|
|
316
|
+
const btnRoles = document.getElementById("btn-roles");
|
|
317
|
+
const btnStatus = document.getElementById("btn-status");
|
|
318
|
+
|
|
319
|
+
function setActiveBtn(active) {
|
|
320
|
+
[btnLedgers, btnRoles, btnStatus].forEach(b => {
|
|
321
|
+
b.className = "px-3 py-1.5 rounded-lg bg-slate-100 hover:bg-slate-200 text-slate-700 text-xs font-medium transition";
|
|
322
|
+
});
|
|
323
|
+
active.className = "px-3 py-1.5 rounded-lg bg-indigo-600 text-white text-xs font-semibold shadow-sm transition";
|
|
324
|
+
}
|
|
325
|
+
|
|
326
|
+
btnLedgers.addEventListener("click", () => {
|
|
327
|
+
setActiveBtn(btnLedgers);
|
|
328
|
+
activeData = datasets.ledgers;
|
|
329
|
+
renderSelectWithKs();
|
|
330
|
+
});
|
|
331
|
+
|
|
332
|
+
btnRoles.addEventListener("click", () => {
|
|
333
|
+
setActiveBtn(btnRoles);
|
|
334
|
+
activeData = datasets.roles;
|
|
335
|
+
renderSelectWithKs();
|
|
336
|
+
});
|
|
337
|
+
|
|
338
|
+
btnStatus.addEventListener("click", () => {
|
|
339
|
+
setActiveBtn(btnStatus);
|
|
340
|
+
activeData = datasets.status;
|
|
341
|
+
renderSelectWithKs();
|
|
342
|
+
});
|
|
343
|
+
|
|
344
|
+
window.copyCode = (id) => {
|
|
345
|
+
const code = document.getElementById(id);
|
|
346
|
+
if (!code) return;
|
|
347
|
+
navigator.clipboard.writeText(code.textContent).then(() => {
|
|
348
|
+
alert("Code copied to clipboard!");
|
|
349
|
+
});
|
|
350
|
+
};
|
|
351
|
+
|
|
352
|
+
// Initial render
|
|
353
|
+
setTimeout(renderSelectWithKs, 100);
|
|
354
|
+
</script>
|
|
355
|
+
|
|
356
|
+
</body>
|
|
357
|
+
|
|
358
|
+
</html>
|