@dmitryvim/form-builder 0.1.33 → 0.1.34
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/dist/demo.js +13 -12
- package/dist/elements.html +610 -161
- package/dist/elements.js +269 -231
- package/dist/form-builder.js +730 -258
- package/dist/index.html +27 -2
- package/package.json +8 -3
package/dist/elements.html
CHANGED
|
@@ -4,7 +4,28 @@
|
|
|
4
4
|
<meta charset="utf-8" />
|
|
5
5
|
<title>Form Builder - Element Types Documentation</title>
|
|
6
6
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
7
|
-
|
|
7
|
+
<!-- Development only - replace with local Tailwind build for production -->
|
|
8
|
+
<script>
|
|
9
|
+
if (
|
|
10
|
+
location.hostname === "localhost" ||
|
|
11
|
+
location.hostname === "127.0.0.1" ||
|
|
12
|
+
location.protocol === "file:"
|
|
13
|
+
) {
|
|
14
|
+
// Development environment - load Tailwind CDN
|
|
15
|
+
const script = document.createElement("script");
|
|
16
|
+
script.src = "https://cdn.tailwindcss.com";
|
|
17
|
+
document.head.appendChild(script);
|
|
18
|
+
} else {
|
|
19
|
+
// Production environment - load local CSS (implement local build)
|
|
20
|
+
console.warn(
|
|
21
|
+
"Production mode: Please implement local Tailwind CSS build",
|
|
22
|
+
);
|
|
23
|
+
const link = document.createElement("link");
|
|
24
|
+
link.rel = "stylesheet";
|
|
25
|
+
link.href = "./tailwind.min.css"; // Local build file
|
|
26
|
+
document.head.appendChild(link);
|
|
27
|
+
}
|
|
28
|
+
</script>
|
|
8
29
|
<script>
|
|
9
30
|
tailwind.config = {
|
|
10
31
|
darkMode: "media",
|
|
@@ -116,12 +137,20 @@
|
|
|
116
137
|
<span class="text-white font-bold text-sm">FB</span>
|
|
117
138
|
</div>
|
|
118
139
|
<div>
|
|
119
|
-
<h1 class="text-lg font-bold text-gray-800">
|
|
120
|
-
|
|
140
|
+
<h1 class="text-lg font-bold text-gray-800">
|
|
141
|
+
Form Builder - Element Types
|
|
142
|
+
</h1>
|
|
143
|
+
<p class="text-xs text-gray-500">
|
|
144
|
+
Complete documentation for all form field types
|
|
145
|
+
</p>
|
|
121
146
|
</div>
|
|
122
147
|
</div>
|
|
123
148
|
<div class="flex items-center space-x-4">
|
|
124
|
-
<a
|
|
149
|
+
<a
|
|
150
|
+
href="./index.html"
|
|
151
|
+
class="text-sm text-blue-600 hover:text-blue-800"
|
|
152
|
+
>← Back to Demo</a
|
|
153
|
+
>
|
|
125
154
|
</div>
|
|
126
155
|
</div>
|
|
127
156
|
</div>
|
|
@@ -131,20 +160,54 @@
|
|
|
131
160
|
<!-- Left Navigation -->
|
|
132
161
|
<div class="w-64 bg-white border-r border-gray-200 min-h-screen">
|
|
133
162
|
<div class="p-4">
|
|
134
|
-
<h3 class="text-sm font-semibold text-gray-900 mb-3">
|
|
163
|
+
<h3 class="text-sm font-semibold text-gray-900 mb-3">
|
|
164
|
+
Element Types
|
|
165
|
+
</h3>
|
|
135
166
|
<nav class="space-y-1">
|
|
136
167
|
<a href="#text" class="nav-item" data-element="text">Text Input</a>
|
|
137
|
-
<a
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
<a href="#
|
|
168
|
+
<a
|
|
169
|
+
href="#text-multiple"
|
|
170
|
+
class="nav-item"
|
|
171
|
+
data-element="text-multiple"
|
|
172
|
+
>Text Input (Multiple)</a
|
|
173
|
+
>
|
|
174
|
+
<a href="#textarea" class="nav-item" data-element="textarea"
|
|
175
|
+
>Textarea</a
|
|
176
|
+
>
|
|
177
|
+
<a
|
|
178
|
+
href="#textarea-multiple"
|
|
179
|
+
class="nav-item"
|
|
180
|
+
data-element="textarea-multiple"
|
|
181
|
+
>Textarea (Multiple)</a
|
|
182
|
+
>
|
|
183
|
+
<a href="#number" class="nav-item" data-element="number"
|
|
184
|
+
>Number Input</a
|
|
185
|
+
>
|
|
186
|
+
<a
|
|
187
|
+
href="#number-multiple"
|
|
188
|
+
class="nav-item"
|
|
189
|
+
data-element="number-multiple"
|
|
190
|
+
>Number Input (Multiple)</a
|
|
191
|
+
>
|
|
192
|
+
<a href="#select" class="nav-item" data-element="select"
|
|
193
|
+
>Select Dropdown</a
|
|
194
|
+
>
|
|
195
|
+
<a
|
|
196
|
+
href="#select-multiple"
|
|
197
|
+
class="nav-item"
|
|
198
|
+
data-element="select-multiple"
|
|
199
|
+
>Select Dropdown (Multiple)</a
|
|
200
|
+
>
|
|
144
201
|
<a href="#file" class="nav-item" data-element="file">File Upload</a>
|
|
145
|
-
<a href="#files" class="nav-item" data-element="files"
|
|
146
|
-
|
|
147
|
-
|
|
202
|
+
<a href="#files" class="nav-item" data-element="files"
|
|
203
|
+
>Multiple Files (Legacy)</a
|
|
204
|
+
>
|
|
205
|
+
<a href="#container" class="nav-item" data-element="container"
|
|
206
|
+
>Container</a
|
|
207
|
+
>
|
|
208
|
+
<a href="#group" class="nav-item" data-element="group"
|
|
209
|
+
>Group (Legacy)</a
|
|
210
|
+
>
|
|
148
211
|
</nav>
|
|
149
212
|
</div>
|
|
150
213
|
</div>
|
|
@@ -154,16 +217,31 @@
|
|
|
154
217
|
<!-- Text Element -->
|
|
155
218
|
<div id="text" class="element-section mb-16">
|
|
156
219
|
<h2 class="text-2xl font-bold text-gray-900 mb-4">Text Input</h2>
|
|
157
|
-
<p class="text-gray-700 mb-4">
|
|
220
|
+
<p class="text-gray-700 mb-4">
|
|
221
|
+
Single line text input with pattern validation and length
|
|
222
|
+
constraints.
|
|
223
|
+
</p>
|
|
158
224
|
<div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
|
|
159
|
-
<p class="text-sm text-blue-800"
|
|
225
|
+
<p class="text-sm text-blue-800">
|
|
226
|
+
<strong>Hidden Fields:</strong> Set <code>hidden: true</code> to
|
|
227
|
+
hide the field from display while including its value in form
|
|
228
|
+
data. Hidden fields use their <code>default</code> value and are
|
|
229
|
+
not rendered in the form.
|
|
230
|
+
</p>
|
|
160
231
|
</div>
|
|
161
232
|
|
|
162
233
|
<div class="grid grid-cols-2 gap-6">
|
|
163
234
|
<!-- Schema Editor -->
|
|
164
235
|
<div>
|
|
165
|
-
<h3 class="text-lg font-semibold text-gray-900 mb-3">
|
|
166
|
-
|
|
236
|
+
<h3 class="text-lg font-semibold text-gray-900 mb-3">
|
|
237
|
+
Schema Definition
|
|
238
|
+
</h3>
|
|
239
|
+
<textarea
|
|
240
|
+
id="text-schema"
|
|
241
|
+
class="w-full h-80 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 font-mono text-sm"
|
|
242
|
+
spellcheck="false"
|
|
243
|
+
>
|
|
244
|
+
{
|
|
167
245
|
"type": "text",
|
|
168
246
|
"key": "username",
|
|
169
247
|
"label": "Username",
|
|
@@ -181,42 +259,75 @@
|
|
|
181
259
|
}
|
|
182
260
|
],
|
|
183
261
|
"hidden": false
|
|
184
|
-
}</textarea
|
|
262
|
+
}</textarea
|
|
263
|
+
>
|
|
185
264
|
</div>
|
|
186
265
|
|
|
187
266
|
<!-- Live Preview -->
|
|
188
267
|
<div>
|
|
189
268
|
<div class="flex items-center justify-between mb-3">
|
|
190
|
-
<h3 class="text-lg font-semibold text-gray-900">
|
|
269
|
+
<h3 class="text-lg font-semibold text-gray-900">
|
|
270
|
+
Live Preview
|
|
271
|
+
</h3>
|
|
191
272
|
<div class="flex items-center space-x-3">
|
|
192
|
-
<span class="text-sm font-medium text-gray-700"
|
|
273
|
+
<span class="text-sm font-medium text-gray-700"
|
|
274
|
+
>Read Only</span
|
|
275
|
+
>
|
|
193
276
|
<label class="toggle-switch">
|
|
194
|
-
<input
|
|
277
|
+
<input
|
|
278
|
+
type="checkbox"
|
|
279
|
+
class="readonly-toggle"
|
|
280
|
+
data-element="text"
|
|
281
|
+
/>
|
|
195
282
|
<span class="toggle-slider"></span>
|
|
196
283
|
</label>
|
|
197
284
|
</div>
|
|
198
285
|
</div>
|
|
199
|
-
<div
|
|
286
|
+
<div
|
|
287
|
+
id="text-preview"
|
|
288
|
+
class="border border-gray-300 rounded-lg p-4 bg-white min-h-80"
|
|
289
|
+
></div>
|
|
200
290
|
</div>
|
|
201
291
|
</div>
|
|
202
292
|
|
|
203
293
|
<div class="mt-6">
|
|
204
|
-
<h3 class="text-lg font-semibold text-gray-900 mb-3">
|
|
294
|
+
<h3 class="text-lg font-semibold text-gray-900 mb-3">
|
|
295
|
+
Available Properties
|
|
296
|
+
</h3>
|
|
205
297
|
<div class="bg-gray-50 rounded-lg p-4">
|
|
206
298
|
<ul class="space-y-2 text-sm">
|
|
207
299
|
<li><strong>type:</strong> "text" (required)</li>
|
|
208
300
|
<li><strong>key:</strong> Field identifier (required)</li>
|
|
209
301
|
<li><strong>label:</strong> Display label for the field</li>
|
|
210
302
|
<li><strong>placeholder:</strong> Placeholder text</li>
|
|
211
|
-
<li
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
<li
|
|
303
|
+
<li>
|
|
304
|
+
<strong>required:</strong> Whether field is required (boolean)
|
|
305
|
+
</li>
|
|
306
|
+
<li>
|
|
307
|
+
<strong>minLength:</strong> Minimum character length (number)
|
|
308
|
+
</li>
|
|
309
|
+
<li>
|
|
310
|
+
<strong>maxLength:</strong> Maximum character length (number)
|
|
311
|
+
</li>
|
|
312
|
+
<li>
|
|
313
|
+
<strong>pattern:</strong> Regular expression for validation
|
|
314
|
+
</li>
|
|
215
315
|
<li><strong>default:</strong> Default value</li>
|
|
216
|
-
<li
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
316
|
+
<li>
|
|
317
|
+
<strong>description:</strong> Field description (shows in
|
|
318
|
+
tooltip)
|
|
319
|
+
</li>
|
|
320
|
+
<li>
|
|
321
|
+
<strong>hint:</strong> Additional hint text (shows in tooltip)
|
|
322
|
+
</li>
|
|
323
|
+
<li>
|
|
324
|
+
<strong>actions:</strong> Array of action buttons for readonly
|
|
325
|
+
mode
|
|
326
|
+
</li>
|
|
327
|
+
<li>
|
|
328
|
+
<strong>hidden:</strong> Hide field from form display but
|
|
329
|
+
include in data (boolean)
|
|
330
|
+
</li>
|
|
220
331
|
</ul>
|
|
221
332
|
</div>
|
|
222
333
|
</div>
|
|
@@ -225,12 +336,21 @@
|
|
|
225
336
|
<!-- Textarea Element -->
|
|
226
337
|
<div id="textarea" class="element-section mb-16">
|
|
227
338
|
<h2 class="text-2xl font-bold text-gray-900 mb-4">Textarea</h2>
|
|
228
|
-
<p class="text-gray-700 mb-6">
|
|
339
|
+
<p class="text-gray-700 mb-6">
|
|
340
|
+
Multi-line text input with configurable row height.
|
|
341
|
+
</p>
|
|
229
342
|
|
|
230
343
|
<div class="grid grid-cols-2 gap-6">
|
|
231
344
|
<div>
|
|
232
|
-
<h3 class="text-lg font-semibold text-gray-900 mb-3">
|
|
233
|
-
|
|
345
|
+
<h3 class="text-lg font-semibold text-gray-900 mb-3">
|
|
346
|
+
Schema Definition
|
|
347
|
+
</h3>
|
|
348
|
+
<textarea
|
|
349
|
+
id="textarea-schema"
|
|
350
|
+
class="w-full h-80 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 font-mono text-sm"
|
|
351
|
+
spellcheck="false"
|
|
352
|
+
>
|
|
353
|
+
{
|
|
234
354
|
"type": "textarea",
|
|
235
355
|
"key": "description",
|
|
236
356
|
"label": "Description",
|
|
@@ -240,41 +360,74 @@
|
|
|
240
360
|
"minLength": 10,
|
|
241
361
|
"maxLength": 500,
|
|
242
362
|
"description": "Provide a detailed description of your project"
|
|
243
|
-
}</textarea
|
|
363
|
+
}</textarea
|
|
364
|
+
>
|
|
244
365
|
</div>
|
|
245
366
|
|
|
246
367
|
<div>
|
|
247
368
|
<div class="flex items-center justify-between mb-3">
|
|
248
|
-
<h3 class="text-lg font-semibold text-gray-900">
|
|
369
|
+
<h3 class="text-lg font-semibold text-gray-900">
|
|
370
|
+
Live Preview
|
|
371
|
+
</h3>
|
|
249
372
|
<div class="flex items-center space-x-3">
|
|
250
|
-
<span class="text-sm font-medium text-gray-700"
|
|
373
|
+
<span class="text-sm font-medium text-gray-700"
|
|
374
|
+
>Read Only</span
|
|
375
|
+
>
|
|
251
376
|
<label class="toggle-switch">
|
|
252
|
-
<input
|
|
377
|
+
<input
|
|
378
|
+
type="checkbox"
|
|
379
|
+
class="readonly-toggle"
|
|
380
|
+
data-element="textarea"
|
|
381
|
+
/>
|
|
253
382
|
<span class="toggle-slider"></span>
|
|
254
383
|
</label>
|
|
255
384
|
</div>
|
|
256
385
|
</div>
|
|
257
|
-
<div
|
|
386
|
+
<div
|
|
387
|
+
id="textarea-preview"
|
|
388
|
+
class="border border-gray-300 rounded-lg p-4 bg-white min-h-80"
|
|
389
|
+
></div>
|
|
258
390
|
</div>
|
|
259
391
|
</div>
|
|
260
392
|
|
|
261
393
|
<div class="mt-6">
|
|
262
|
-
<h3 class="text-lg font-semibold text-gray-900 mb-3">
|
|
394
|
+
<h3 class="text-lg font-semibold text-gray-900 mb-3">
|
|
395
|
+
Available Properties
|
|
396
|
+
</h3>
|
|
263
397
|
<div class="bg-gray-50 rounded-lg p-4">
|
|
264
398
|
<ul class="space-y-2 text-sm">
|
|
265
399
|
<li><strong>type:</strong> "textarea" (required)</li>
|
|
266
400
|
<li><strong>key:</strong> Field identifier (required)</li>
|
|
267
401
|
<li><strong>label:</strong> Display label for the field</li>
|
|
268
402
|
<li><strong>placeholder:</strong> Placeholder text</li>
|
|
269
|
-
<li
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
<li
|
|
403
|
+
<li>
|
|
404
|
+
<strong>rows:</strong> Number of visible rows (default: 4)
|
|
405
|
+
</li>
|
|
406
|
+
<li>
|
|
407
|
+
<strong>required:</strong> Whether field is required (boolean)
|
|
408
|
+
</li>
|
|
409
|
+
<li>
|
|
410
|
+
<strong>minLength:</strong> Minimum character length (number)
|
|
411
|
+
</li>
|
|
412
|
+
<li>
|
|
413
|
+
<strong>maxLength:</strong> Maximum character length (number)
|
|
414
|
+
</li>
|
|
273
415
|
<li><strong>default:</strong> Default value</li>
|
|
274
|
-
<li
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
416
|
+
<li>
|
|
417
|
+
<strong>description:</strong> Field description (shows in
|
|
418
|
+
tooltip)
|
|
419
|
+
</li>
|
|
420
|
+
<li>
|
|
421
|
+
<strong>hint:</strong> Additional hint text (shows in tooltip)
|
|
422
|
+
</li>
|
|
423
|
+
<li>
|
|
424
|
+
<strong>actions:</strong> Array of action buttons for readonly
|
|
425
|
+
mode
|
|
426
|
+
</li>
|
|
427
|
+
<li>
|
|
428
|
+
<strong>hidden:</strong> Hide field from form display but
|
|
429
|
+
include in data (boolean)
|
|
430
|
+
</li>
|
|
278
431
|
</ul>
|
|
279
432
|
</div>
|
|
280
433
|
</div>
|
|
@@ -283,12 +436,21 @@
|
|
|
283
436
|
<!-- Number Element -->
|
|
284
437
|
<div id="number" class="element-section mb-16">
|
|
285
438
|
<h2 class="text-2xl font-bold text-gray-900 mb-4">Number Input</h2>
|
|
286
|
-
<p class="text-gray-700 mb-6">
|
|
439
|
+
<p class="text-gray-700 mb-6">
|
|
440
|
+
Numeric input with min/max/step validation.
|
|
441
|
+
</p>
|
|
287
442
|
|
|
288
443
|
<div class="grid grid-cols-2 gap-6">
|
|
289
444
|
<div>
|
|
290
|
-
<h3 class="text-lg font-semibold text-gray-900 mb-3">
|
|
291
|
-
|
|
445
|
+
<h3 class="text-lg font-semibold text-gray-900 mb-3">
|
|
446
|
+
Schema Definition
|
|
447
|
+
</h3>
|
|
448
|
+
<textarea
|
|
449
|
+
id="number-schema"
|
|
450
|
+
class="w-full h-80 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 font-mono text-sm"
|
|
451
|
+
spellcheck="false"
|
|
452
|
+
>
|
|
453
|
+
{
|
|
292
454
|
"type": "number",
|
|
293
455
|
"key": "price",
|
|
294
456
|
"label": "Price (USD)",
|
|
@@ -299,41 +461,70 @@
|
|
|
299
461
|
"step": 0.01,
|
|
300
462
|
"default": 99.99,
|
|
301
463
|
"description": "Product price in US dollars"
|
|
302
|
-
}</textarea
|
|
464
|
+
}</textarea
|
|
465
|
+
>
|
|
303
466
|
</div>
|
|
304
467
|
|
|
305
468
|
<div>
|
|
306
469
|
<div class="flex items-center justify-between mb-3">
|
|
307
|
-
<h3 class="text-lg font-semibold text-gray-900">
|
|
470
|
+
<h3 class="text-lg font-semibold text-gray-900">
|
|
471
|
+
Live Preview
|
|
472
|
+
</h3>
|
|
308
473
|
<div class="flex items-center space-x-3">
|
|
309
|
-
<span class="text-sm font-medium text-gray-700"
|
|
474
|
+
<span class="text-sm font-medium text-gray-700"
|
|
475
|
+
>Read Only</span
|
|
476
|
+
>
|
|
310
477
|
<label class="toggle-switch">
|
|
311
|
-
<input
|
|
478
|
+
<input
|
|
479
|
+
type="checkbox"
|
|
480
|
+
class="readonly-toggle"
|
|
481
|
+
data-element="number"
|
|
482
|
+
/>
|
|
312
483
|
<span class="toggle-slider"></span>
|
|
313
484
|
</label>
|
|
314
485
|
</div>
|
|
315
486
|
</div>
|
|
316
|
-
<div
|
|
487
|
+
<div
|
|
488
|
+
id="number-preview"
|
|
489
|
+
class="border border-gray-300 rounded-lg p-4 bg-white min-h-80"
|
|
490
|
+
></div>
|
|
317
491
|
</div>
|
|
318
492
|
</div>
|
|
319
493
|
|
|
320
494
|
<div class="mt-6">
|
|
321
|
-
<h3 class="text-lg font-semibold text-gray-900 mb-3">
|
|
495
|
+
<h3 class="text-lg font-semibold text-gray-900 mb-3">
|
|
496
|
+
Available Properties
|
|
497
|
+
</h3>
|
|
322
498
|
<div class="bg-gray-50 rounded-lg p-4">
|
|
323
499
|
<ul class="space-y-2 text-sm">
|
|
324
500
|
<li><strong>type:</strong> "number" (required)</li>
|
|
325
501
|
<li><strong>key:</strong> Field identifier (required)</li>
|
|
326
502
|
<li><strong>label:</strong> Display label for the field</li>
|
|
327
503
|
<li><strong>placeholder:</strong> Placeholder text</li>
|
|
328
|
-
<li
|
|
504
|
+
<li>
|
|
505
|
+
<strong>required:</strong> Whether field is required (boolean)
|
|
506
|
+
</li>
|
|
329
507
|
<li><strong>min:</strong> Minimum value (number)</li>
|
|
330
508
|
<li><strong>max:</strong> Maximum value (number)</li>
|
|
331
|
-
<li
|
|
509
|
+
<li>
|
|
510
|
+
<strong>step:</strong> Step increment for input controls
|
|
511
|
+
</li>
|
|
332
512
|
<li><strong>default:</strong> Default value</li>
|
|
333
|
-
<li
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
513
|
+
<li>
|
|
514
|
+
<strong>description:</strong> Field description (shows in
|
|
515
|
+
tooltip)
|
|
516
|
+
</li>
|
|
517
|
+
<li>
|
|
518
|
+
<strong>hint:</strong> Additional hint text (shows in tooltip)
|
|
519
|
+
</li>
|
|
520
|
+
<li>
|
|
521
|
+
<strong>actions:</strong> Array of action buttons for readonly
|
|
522
|
+
mode
|
|
523
|
+
</li>
|
|
524
|
+
<li>
|
|
525
|
+
<strong>hidden:</strong> Hide field from form display but
|
|
526
|
+
include in data (boolean)
|
|
527
|
+
</li>
|
|
337
528
|
</ul>
|
|
338
529
|
</div>
|
|
339
530
|
</div>
|
|
@@ -342,12 +533,21 @@
|
|
|
342
533
|
<!-- Select Element -->
|
|
343
534
|
<div id="select" class="element-section mb-16">
|
|
344
535
|
<h2 class="text-2xl font-bold text-gray-900 mb-4">Select Dropdown</h2>
|
|
345
|
-
<p class="text-gray-700 mb-6">
|
|
536
|
+
<p class="text-gray-700 mb-6">
|
|
537
|
+
Dropdown selection with predefined options.
|
|
538
|
+
</p>
|
|
346
539
|
|
|
347
540
|
<div class="grid grid-cols-2 gap-6">
|
|
348
541
|
<div>
|
|
349
|
-
<h3 class="text-lg font-semibold text-gray-900 mb-3">
|
|
350
|
-
|
|
542
|
+
<h3 class="text-lg font-semibold text-gray-900 mb-3">
|
|
543
|
+
Schema Definition
|
|
544
|
+
</h3>
|
|
545
|
+
<textarea
|
|
546
|
+
id="select-schema"
|
|
547
|
+
class="w-full h-80 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 font-mono text-sm"
|
|
548
|
+
spellcheck="false"
|
|
549
|
+
>
|
|
550
|
+
{
|
|
351
551
|
"type": "select",
|
|
352
552
|
"key": "category",
|
|
353
553
|
"label": "Product Category",
|
|
@@ -361,38 +561,71 @@
|
|
|
361
561
|
],
|
|
362
562
|
"default": "electronics",
|
|
363
563
|
"description": "Select the primary category for your product"
|
|
364
|
-
}</textarea
|
|
564
|
+
}</textarea
|
|
565
|
+
>
|
|
365
566
|
</div>
|
|
366
567
|
|
|
367
568
|
<div>
|
|
368
569
|
<div class="flex items-center justify-between mb-3">
|
|
369
|
-
<h3 class="text-lg font-semibold text-gray-900">
|
|
570
|
+
<h3 class="text-lg font-semibold text-gray-900">
|
|
571
|
+
Live Preview
|
|
572
|
+
</h3>
|
|
370
573
|
<div class="flex items-center space-x-3">
|
|
371
|
-
<span class="text-sm font-medium text-gray-700"
|
|
574
|
+
<span class="text-sm font-medium text-gray-700"
|
|
575
|
+
>Read Only</span
|
|
576
|
+
>
|
|
372
577
|
<label class="toggle-switch">
|
|
373
|
-
<input
|
|
578
|
+
<input
|
|
579
|
+
type="checkbox"
|
|
580
|
+
class="readonly-toggle"
|
|
581
|
+
data-element="select"
|
|
582
|
+
/>
|
|
374
583
|
<span class="toggle-slider"></span>
|
|
375
584
|
</label>
|
|
376
585
|
</div>
|
|
377
586
|
</div>
|
|
378
|
-
<div
|
|
587
|
+
<div
|
|
588
|
+
id="select-preview"
|
|
589
|
+
class="border border-gray-300 rounded-lg p-4 bg-white min-h-80"
|
|
590
|
+
></div>
|
|
379
591
|
</div>
|
|
380
592
|
</div>
|
|
381
593
|
|
|
382
594
|
<div class="mt-6">
|
|
383
|
-
<h3 class="text-lg font-semibold text-gray-900 mb-3">
|
|
595
|
+
<h3 class="text-lg font-semibold text-gray-900 mb-3">
|
|
596
|
+
Available Properties
|
|
597
|
+
</h3>
|
|
384
598
|
<div class="bg-gray-50 rounded-lg p-4">
|
|
385
599
|
<ul class="space-y-2 text-sm">
|
|
386
600
|
<li><strong>type:</strong> "select" (required)</li>
|
|
387
601
|
<li><strong>key:</strong> Field identifier (required)</li>
|
|
388
602
|
<li><strong>label:</strong> Display label for the field</li>
|
|
389
|
-
<li
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
<li
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
603
|
+
<li>
|
|
604
|
+
<strong>required:</strong> Whether field is required (boolean)
|
|
605
|
+
</li>
|
|
606
|
+
<li>
|
|
607
|
+
<strong>options:</strong> Array of {value, label} option
|
|
608
|
+
objects (required)
|
|
609
|
+
</li>
|
|
610
|
+
<li>
|
|
611
|
+
<strong>default:</strong> Default selected value (must match
|
|
612
|
+
an option value)
|
|
613
|
+
</li>
|
|
614
|
+
<li>
|
|
615
|
+
<strong>description:</strong> Field description (shows in
|
|
616
|
+
tooltip)
|
|
617
|
+
</li>
|
|
618
|
+
<li>
|
|
619
|
+
<strong>hint:</strong> Additional hint text (shows in tooltip)
|
|
620
|
+
</li>
|
|
621
|
+
<li>
|
|
622
|
+
<strong>actions:</strong> Array of action buttons for readonly
|
|
623
|
+
mode
|
|
624
|
+
</li>
|
|
625
|
+
<li>
|
|
626
|
+
<strong>hidden:</strong> Hide field from form display but
|
|
627
|
+
include in data (boolean)
|
|
628
|
+
</li>
|
|
396
629
|
</ul>
|
|
397
630
|
</div>
|
|
398
631
|
</div>
|
|
@@ -401,15 +634,30 @@
|
|
|
401
634
|
<!-- File Element -->
|
|
402
635
|
<div id="file" class="element-section mb-16">
|
|
403
636
|
<h2 class="text-2xl font-bold text-gray-900 mb-4">File Upload</h2>
|
|
404
|
-
<p class="text-gray-700 mb-4">
|
|
637
|
+
<p class="text-gray-700 mb-4">
|
|
638
|
+
File upload with preview, drag-and-drop, and file type restrictions.
|
|
639
|
+
Supports both single and multiple files.
|
|
640
|
+
</p>
|
|
405
641
|
<div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
|
|
406
|
-
<p class="text-sm text-blue-800"
|
|
642
|
+
<p class="text-sm text-blue-800">
|
|
643
|
+
<strong>Multiple Files:</strong> Set
|
|
644
|
+
<code>multiple: true</code> to allow multiple file selection. Use
|
|
645
|
+
<code>min</code> and <code>max</code> properties to control file
|
|
646
|
+
count limits.
|
|
647
|
+
</p>
|
|
407
648
|
</div>
|
|
408
649
|
|
|
409
650
|
<div class="grid grid-cols-2 gap-6">
|
|
410
651
|
<div>
|
|
411
|
-
<h3 class="text-lg font-semibold text-gray-900 mb-3">
|
|
412
|
-
|
|
652
|
+
<h3 class="text-lg font-semibold text-gray-900 mb-3">
|
|
653
|
+
Schema Definition
|
|
654
|
+
</h3>
|
|
655
|
+
<textarea
|
|
656
|
+
id="file-schema"
|
|
657
|
+
class="w-full h-80 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 font-mono text-sm"
|
|
658
|
+
spellcheck="false"
|
|
659
|
+
>
|
|
660
|
+
{
|
|
413
661
|
"type": "file",
|
|
414
662
|
"key": "avatar",
|
|
415
663
|
"label": "Profile Picture",
|
|
@@ -419,43 +667,87 @@
|
|
|
419
667
|
"maxSize": 5242880
|
|
420
668
|
},
|
|
421
669
|
"description": "Upload your profile picture (max 5MB, images only)"
|
|
422
|
-
}</textarea
|
|
670
|
+
}</textarea
|
|
671
|
+
>
|
|
423
672
|
</div>
|
|
424
673
|
|
|
425
674
|
<div>
|
|
426
675
|
<div class="flex items-center justify-between mb-3">
|
|
427
|
-
<h3 class="text-lg font-semibold text-gray-900">
|
|
676
|
+
<h3 class="text-lg font-semibold text-gray-900">
|
|
677
|
+
Live Preview
|
|
678
|
+
</h3>
|
|
428
679
|
<div class="flex items-center space-x-3">
|
|
429
|
-
<span class="text-sm font-medium text-gray-700"
|
|
680
|
+
<span class="text-sm font-medium text-gray-700"
|
|
681
|
+
>Read Only</span
|
|
682
|
+
>
|
|
430
683
|
<label class="toggle-switch">
|
|
431
|
-
<input
|
|
684
|
+
<input
|
|
685
|
+
type="checkbox"
|
|
686
|
+
class="readonly-toggle"
|
|
687
|
+
data-element="file"
|
|
688
|
+
/>
|
|
432
689
|
<span class="toggle-slider"></span>
|
|
433
690
|
</label>
|
|
434
691
|
</div>
|
|
435
692
|
</div>
|
|
436
|
-
<div
|
|
693
|
+
<div
|
|
694
|
+
id="file-preview"
|
|
695
|
+
class="border border-gray-300 rounded-lg p-4 bg-white min-h-80"
|
|
696
|
+
></div>
|
|
437
697
|
</div>
|
|
438
698
|
</div>
|
|
439
699
|
|
|
440
700
|
<div class="mt-6">
|
|
441
|
-
<h3 class="text-lg font-semibold text-gray-900 mb-3">
|
|
701
|
+
<h3 class="text-lg font-semibold text-gray-900 mb-3">
|
|
702
|
+
Available Properties
|
|
703
|
+
</h3>
|
|
442
704
|
<div class="bg-gray-50 rounded-lg p-4">
|
|
443
705
|
<ul class="space-y-2 text-sm">
|
|
444
706
|
<li><strong>type:</strong> "file" (required)</li>
|
|
445
707
|
<li><strong>key:</strong> Field identifier (required)</li>
|
|
446
708
|
<li><strong>label:</strong> Display label for the field</li>
|
|
447
|
-
<li
|
|
709
|
+
<li>
|
|
710
|
+
<strong>required:</strong> Whether field is required (boolean)
|
|
711
|
+
</li>
|
|
448
712
|
<li><strong>accept:</strong> Object with file restrictions</li>
|
|
449
|
-
<li
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
<li
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
<li
|
|
457
|
-
|
|
458
|
-
|
|
713
|
+
<li>
|
|
714
|
+
<strong>accept.extensions:</strong> Array of allowed file
|
|
715
|
+
extensions
|
|
716
|
+
</li>
|
|
717
|
+
<li>
|
|
718
|
+
<strong>accept.maxSize:</strong> Maximum file size in bytes
|
|
719
|
+
</li>
|
|
720
|
+
<li>
|
|
721
|
+
<strong>multiple:</strong> Allow multiple file selection
|
|
722
|
+
(boolean)
|
|
723
|
+
</li>
|
|
724
|
+
<li>
|
|
725
|
+
<strong>minCount:</strong> Minimum number of files (when
|
|
726
|
+
multiple is true)
|
|
727
|
+
</li>
|
|
728
|
+
<li>
|
|
729
|
+
<strong>maxCount:</strong> Maximum number of files (when
|
|
730
|
+
multiple is true)
|
|
731
|
+
</li>
|
|
732
|
+
<li>
|
|
733
|
+
<strong>default:</strong> Default file resource ID or array
|
|
734
|
+
for multiple
|
|
735
|
+
</li>
|
|
736
|
+
<li>
|
|
737
|
+
<strong>description:</strong> Field description (shows in
|
|
738
|
+
tooltip)
|
|
739
|
+
</li>
|
|
740
|
+
<li>
|
|
741
|
+
<strong>hint:</strong> Additional hint text (shows in tooltip)
|
|
742
|
+
</li>
|
|
743
|
+
<li>
|
|
744
|
+
<strong>actions:</strong> Array of action buttons for readonly
|
|
745
|
+
mode
|
|
746
|
+
</li>
|
|
747
|
+
<li>
|
|
748
|
+
<strong>hidden:</strong> Hide field from form display but
|
|
749
|
+
include in data (boolean)
|
|
750
|
+
</li>
|
|
459
751
|
</ul>
|
|
460
752
|
</div>
|
|
461
753
|
</div>
|
|
@@ -463,16 +755,34 @@
|
|
|
463
755
|
|
|
464
756
|
<!-- Files Element -->
|
|
465
757
|
<div id="files" class="element-section mb-16">
|
|
466
|
-
<h2 class="text-2xl font-bold text-gray-900 mb-4">
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
758
|
+
<h2 class="text-2xl font-bold text-gray-900 mb-4">
|
|
759
|
+
Multiple Files (Legacy)
|
|
760
|
+
</h2>
|
|
761
|
+
<p class="text-gray-700 mb-4">
|
|
762
|
+
Multiple file uploads with grid preview, count limits, and
|
|
763
|
+
drag-and-drop.
|
|
764
|
+
</p>
|
|
765
|
+
<div
|
|
766
|
+
class="bg-orange-50 border border-orange-200 rounded-lg p-4 mb-6"
|
|
767
|
+
>
|
|
768
|
+
<p class="text-sm text-orange-800">
|
|
769
|
+
<strong>⚠️ Deprecated:</strong> The <code>files</code> type is
|
|
770
|
+
deprecated. Use <code>file</code> with
|
|
771
|
+
<code>multiple: true</code> instead for consistent API design.
|
|
772
|
+
</p>
|
|
470
773
|
</div>
|
|
471
774
|
|
|
472
775
|
<div class="grid grid-cols-2 gap-6">
|
|
473
776
|
<div>
|
|
474
|
-
<h3 class="text-lg font-semibold text-gray-900 mb-3">
|
|
475
|
-
|
|
777
|
+
<h3 class="text-lg font-semibold text-gray-900 mb-3">
|
|
778
|
+
Schema Definition
|
|
779
|
+
</h3>
|
|
780
|
+
<textarea
|
|
781
|
+
id="files-schema"
|
|
782
|
+
class="w-full h-80 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 font-mono text-sm"
|
|
783
|
+
spellcheck="false"
|
|
784
|
+
>
|
|
785
|
+
{
|
|
476
786
|
"type": "files",
|
|
477
787
|
"key": "attachments",
|
|
478
788
|
"label": "Project Attachments",
|
|
@@ -484,42 +794,76 @@
|
|
|
484
794
|
"maxSize": 10485760
|
|
485
795
|
},
|
|
486
796
|
"description": "Upload project files (max 10MB each, 1-10 files)"
|
|
487
|
-
}</textarea
|
|
797
|
+
}</textarea
|
|
798
|
+
>
|
|
488
799
|
</div>
|
|
489
800
|
|
|
490
801
|
<div>
|
|
491
802
|
<div class="flex items-center justify-between mb-3">
|
|
492
|
-
<h3 class="text-lg font-semibold text-gray-900">
|
|
803
|
+
<h3 class="text-lg font-semibold text-gray-900">
|
|
804
|
+
Live Preview
|
|
805
|
+
</h3>
|
|
493
806
|
<div class="flex items-center space-x-3">
|
|
494
|
-
<span class="text-sm font-medium text-gray-700"
|
|
807
|
+
<span class="text-sm font-medium text-gray-700"
|
|
808
|
+
>Read Only</span
|
|
809
|
+
>
|
|
495
810
|
<label class="toggle-switch">
|
|
496
|
-
<input
|
|
811
|
+
<input
|
|
812
|
+
type="checkbox"
|
|
813
|
+
class="readonly-toggle"
|
|
814
|
+
data-element="files"
|
|
815
|
+
/>
|
|
497
816
|
<span class="toggle-slider"></span>
|
|
498
817
|
</label>
|
|
499
818
|
</div>
|
|
500
819
|
</div>
|
|
501
|
-
<div
|
|
820
|
+
<div
|
|
821
|
+
id="files-preview"
|
|
822
|
+
class="border border-gray-300 rounded-lg p-4 bg-white min-h-80"
|
|
823
|
+
></div>
|
|
502
824
|
</div>
|
|
503
825
|
</div>
|
|
504
826
|
|
|
505
827
|
<div class="mt-6">
|
|
506
|
-
<h3 class="text-lg font-semibold text-gray-900 mb-3">
|
|
828
|
+
<h3 class="text-lg font-semibold text-gray-900 mb-3">
|
|
829
|
+
Available Properties
|
|
830
|
+
</h3>
|
|
507
831
|
<div class="bg-gray-50 rounded-lg p-4">
|
|
508
832
|
<ul class="space-y-2 text-sm">
|
|
509
833
|
<li><strong>type:</strong> "files" (required)</li>
|
|
510
834
|
<li><strong>key:</strong> Field identifier (required)</li>
|
|
511
835
|
<li><strong>label:</strong> Display label for the field</li>
|
|
512
|
-
<li
|
|
836
|
+
<li>
|
|
837
|
+
<strong>required:</strong> Whether field is required (boolean)
|
|
838
|
+
</li>
|
|
513
839
|
<li><strong>min:</strong> Minimum number of files (number)</li>
|
|
514
840
|
<li><strong>max:</strong> Maximum number of files (number)</li>
|
|
515
841
|
<li><strong>accept:</strong> Object with file restrictions</li>
|
|
516
|
-
<li
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
<li
|
|
521
|
-
|
|
522
|
-
|
|
842
|
+
<li>
|
|
843
|
+
<strong>accept.extensions:</strong> Array of allowed file
|
|
844
|
+
extensions
|
|
845
|
+
</li>
|
|
846
|
+
<li>
|
|
847
|
+
<strong>accept.maxSize:</strong> Maximum file size in bytes
|
|
848
|
+
</li>
|
|
849
|
+
<li>
|
|
850
|
+
<strong>default:</strong> Array of default file resource IDs
|
|
851
|
+
</li>
|
|
852
|
+
<li>
|
|
853
|
+
<strong>description:</strong> Field description (shows in
|
|
854
|
+
tooltip)
|
|
855
|
+
</li>
|
|
856
|
+
<li>
|
|
857
|
+
<strong>hint:</strong> Additional hint text (shows in tooltip)
|
|
858
|
+
</li>
|
|
859
|
+
<li>
|
|
860
|
+
<strong>actions:</strong> Array of action buttons for readonly
|
|
861
|
+
mode
|
|
862
|
+
</li>
|
|
863
|
+
<li>
|
|
864
|
+
<strong>hidden:</strong> Hide field from form display but
|
|
865
|
+
include in data (boolean)
|
|
866
|
+
</li>
|
|
523
867
|
</ul>
|
|
524
868
|
</div>
|
|
525
869
|
</div>
|
|
@@ -528,16 +872,31 @@
|
|
|
528
872
|
<!-- Container Element -->
|
|
529
873
|
<div id="container" class="element-section mb-16">
|
|
530
874
|
<h2 class="text-2xl font-bold text-gray-900 mb-4">Container</h2>
|
|
531
|
-
<p class="text-gray-700 mb-4">
|
|
875
|
+
<p class="text-gray-700 mb-4">
|
|
876
|
+
Nested object container with support for both single objects and
|
|
877
|
+
repeatable arrays.
|
|
878
|
+
</p>
|
|
532
879
|
<div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
|
|
533
|
-
<p class="text-sm text-blue-800"
|
|
880
|
+
<p class="text-sm text-blue-800">
|
|
881
|
+
<strong>Multiple Containers:</strong> Set
|
|
882
|
+
<code>multiple: true</code> to create repeatable container arrays.
|
|
883
|
+
Use <code>minCount</code> and <code>maxCount</code> to control
|
|
884
|
+
item limits.
|
|
885
|
+
</p>
|
|
534
886
|
</div>
|
|
535
887
|
|
|
536
888
|
<div class="grid grid-cols-2 gap-6">
|
|
537
889
|
<!-- Schema Editor -->
|
|
538
890
|
<div>
|
|
539
|
-
<h3 class="text-lg font-semibold text-gray-900 mb-3">
|
|
540
|
-
|
|
891
|
+
<h3 class="text-lg font-semibold text-gray-900 mb-3">
|
|
892
|
+
Schema Definition
|
|
893
|
+
</h3>
|
|
894
|
+
<textarea
|
|
895
|
+
id="container-schema"
|
|
896
|
+
class="w-full h-80 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 font-mono text-sm"
|
|
897
|
+
spellcheck="false"
|
|
898
|
+
>
|
|
899
|
+
{
|
|
541
900
|
"type": "container",
|
|
542
901
|
"key": "contacts",
|
|
543
902
|
"label": "Contact Information",
|
|
@@ -571,40 +930,76 @@
|
|
|
571
930
|
}
|
|
572
931
|
],
|
|
573
932
|
"description": "Add contact information for your project"
|
|
574
|
-
}</textarea
|
|
933
|
+
}</textarea
|
|
934
|
+
>
|
|
575
935
|
</div>
|
|
576
936
|
|
|
577
937
|
<!-- Live Preview -->
|
|
578
938
|
<div>
|
|
579
939
|
<div class="flex items-center justify-between mb-3">
|
|
580
|
-
<h3 class="text-lg font-semibold text-gray-900">
|
|
940
|
+
<h3 class="text-lg font-semibold text-gray-900">
|
|
941
|
+
Live Preview
|
|
942
|
+
</h3>
|
|
581
943
|
<div class="flex items-center space-x-3">
|
|
582
|
-
<span class="text-sm font-medium text-gray-700"
|
|
944
|
+
<span class="text-sm font-medium text-gray-700"
|
|
945
|
+
>Read Only</span
|
|
946
|
+
>
|
|
583
947
|
<label class="toggle-switch">
|
|
584
|
-
<input
|
|
948
|
+
<input
|
|
949
|
+
type="checkbox"
|
|
950
|
+
class="readonly-toggle"
|
|
951
|
+
data-element="container"
|
|
952
|
+
/>
|
|
585
953
|
<span class="toggle-slider"></span>
|
|
586
954
|
</label>
|
|
587
955
|
</div>
|
|
588
956
|
</div>
|
|
589
|
-
<div
|
|
957
|
+
<div
|
|
958
|
+
id="container-preview"
|
|
959
|
+
class="border border-gray-300 rounded-lg p-4 bg-white min-h-80"
|
|
960
|
+
></div>
|
|
590
961
|
</div>
|
|
591
962
|
</div>
|
|
592
963
|
|
|
593
964
|
<div class="mt-6">
|
|
594
|
-
<h3 class="text-lg font-semibold text-gray-900 mb-3">
|
|
965
|
+
<h3 class="text-lg font-semibold text-gray-900 mb-3">
|
|
966
|
+
Available Properties
|
|
967
|
+
</h3>
|
|
595
968
|
<div class="bg-gray-50 rounded-lg p-4">
|
|
596
969
|
<ul class="space-y-2 text-sm">
|
|
597
970
|
<li><strong>type:</strong> "container" (required)</li>
|
|
598
971
|
<li><strong>key:</strong> Field identifier (required)</li>
|
|
599
972
|
<li><strong>label:</strong> Display label for the container</li>
|
|
600
|
-
<li
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
<li
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
<li
|
|
973
|
+
<li>
|
|
974
|
+
<strong>elements:</strong> Array of nested form elements
|
|
975
|
+
(required)
|
|
976
|
+
</li>
|
|
977
|
+
<li>
|
|
978
|
+
<strong>multiple:</strong> Make container repeatable (boolean)
|
|
979
|
+
</li>
|
|
980
|
+
<li>
|
|
981
|
+
<strong>minCount:</strong> Minimum number of container
|
|
982
|
+
instances (when multiple is true)
|
|
983
|
+
</li>
|
|
984
|
+
<li>
|
|
985
|
+
<strong>maxCount:</strong> Maximum number of container
|
|
986
|
+
instances (when multiple is true)
|
|
987
|
+
</li>
|
|
988
|
+
<li>
|
|
989
|
+
<strong>description:</strong> Container description (shows in
|
|
990
|
+
tooltip)
|
|
991
|
+
</li>
|
|
992
|
+
<li>
|
|
993
|
+
<strong>hint:</strong> Additional hint text (shows in tooltip)
|
|
994
|
+
</li>
|
|
995
|
+
<li>
|
|
996
|
+
<strong>actions:</strong> Array of action buttons for readonly
|
|
997
|
+
mode
|
|
998
|
+
</li>
|
|
999
|
+
<li>
|
|
1000
|
+
<strong>hidden:</strong> Hide field from form display but
|
|
1001
|
+
include in data (boolean)
|
|
1002
|
+
</li>
|
|
608
1003
|
</ul>
|
|
609
1004
|
</div>
|
|
610
1005
|
</div>
|
|
@@ -612,16 +1007,36 @@
|
|
|
612
1007
|
|
|
613
1008
|
<!-- Group Element -->
|
|
614
1009
|
<div id="group" class="element-section mb-16">
|
|
615
|
-
<h2 class="text-2xl font-bold text-gray-900 mb-4">
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
1010
|
+
<h2 class="text-2xl font-bold text-gray-900 mb-4">
|
|
1011
|
+
Group Container (Legacy)
|
|
1012
|
+
</h2>
|
|
1013
|
+
<p class="text-gray-700 mb-4">
|
|
1014
|
+
Nested object container with optional repeatable arrays (min/max
|
|
1015
|
+
items).
|
|
1016
|
+
</p>
|
|
1017
|
+
<div
|
|
1018
|
+
class="bg-orange-50 border border-orange-200 rounded-lg p-4 mb-6"
|
|
1019
|
+
>
|
|
1020
|
+
<p class="text-sm text-orange-800">
|
|
1021
|
+
<strong>⚠️ Deprecated:</strong> The <code>group</code> type is
|
|
1022
|
+
deprecated. Use <code>container</code> with
|
|
1023
|
+
<code>multiple: true</code> instead. Groups use
|
|
1024
|
+
<code>repeat: {min, max}</code> syntax which is being replaced by
|
|
1025
|
+
<code>minCount</code> and <code>maxCount</code> properties.
|
|
1026
|
+
</p>
|
|
619
1027
|
</div>
|
|
620
1028
|
|
|
621
1029
|
<div class="grid grid-cols-2 gap-6">
|
|
622
1030
|
<div>
|
|
623
|
-
<h3 class="text-lg font-semibold text-gray-900 mb-3">
|
|
624
|
-
|
|
1031
|
+
<h3 class="text-lg font-semibold text-gray-900 mb-3">
|
|
1032
|
+
Schema Definition
|
|
1033
|
+
</h3>
|
|
1034
|
+
<textarea
|
|
1035
|
+
id="group-schema"
|
|
1036
|
+
class="w-full h-80 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 font-mono text-sm"
|
|
1037
|
+
spellcheck="false"
|
|
1038
|
+
>
|
|
1039
|
+
{
|
|
625
1040
|
"type": "group",
|
|
626
1041
|
"key": "contacts",
|
|
627
1042
|
"label": "Contact Information",
|
|
@@ -656,39 +1071,73 @@
|
|
|
656
1071
|
}
|
|
657
1072
|
],
|
|
658
1073
|
"description": "Add contact information for your project"
|
|
659
|
-
}</textarea
|
|
1074
|
+
}</textarea
|
|
1075
|
+
>
|
|
660
1076
|
</div>
|
|
661
1077
|
|
|
662
1078
|
<div>
|
|
663
1079
|
<div class="flex items-center justify-between mb-3">
|
|
664
|
-
<h3 class="text-lg font-semibold text-gray-900">
|
|
1080
|
+
<h3 class="text-lg font-semibold text-gray-900">
|
|
1081
|
+
Live Preview
|
|
1082
|
+
</h3>
|
|
665
1083
|
<div class="flex items-center space-x-3">
|
|
666
|
-
<span class="text-sm font-medium text-gray-700"
|
|
1084
|
+
<span class="text-sm font-medium text-gray-700"
|
|
1085
|
+
>Read Only</span
|
|
1086
|
+
>
|
|
667
1087
|
<label class="toggle-switch">
|
|
668
|
-
<input
|
|
1088
|
+
<input
|
|
1089
|
+
type="checkbox"
|
|
1090
|
+
class="readonly-toggle"
|
|
1091
|
+
data-element="group"
|
|
1092
|
+
/>
|
|
669
1093
|
<span class="toggle-slider"></span>
|
|
670
1094
|
</label>
|
|
671
1095
|
</div>
|
|
672
1096
|
</div>
|
|
673
|
-
<div
|
|
1097
|
+
<div
|
|
1098
|
+
id="group-preview"
|
|
1099
|
+
class="border border-gray-300 rounded-lg p-4 bg-white min-h-80"
|
|
1100
|
+
></div>
|
|
674
1101
|
</div>
|
|
675
1102
|
</div>
|
|
676
1103
|
|
|
677
1104
|
<div class="mt-6">
|
|
678
|
-
<h3 class="text-lg font-semibold text-gray-900 mb-3">
|
|
1105
|
+
<h3 class="text-lg font-semibold text-gray-900 mb-3">
|
|
1106
|
+
Available Properties
|
|
1107
|
+
</h3>
|
|
679
1108
|
<div class="bg-gray-50 rounded-lg p-4">
|
|
680
1109
|
<ul class="space-y-2 text-sm">
|
|
681
1110
|
<li><strong>type:</strong> "group" (required)</li>
|
|
682
1111
|
<li><strong>key:</strong> Field identifier (required)</li>
|
|
683
1112
|
<li><strong>label:</strong> Display label for the group</li>
|
|
684
|
-
<li
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
<li
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
<li
|
|
1113
|
+
<li>
|
|
1114
|
+
<strong>elements:</strong> Array of nested form elements
|
|
1115
|
+
(required)
|
|
1116
|
+
</li>
|
|
1117
|
+
<li>
|
|
1118
|
+
<strong>repeat:</strong> Object to make group repeatable
|
|
1119
|
+
</li>
|
|
1120
|
+
<li>
|
|
1121
|
+
<strong>repeat.min:</strong> Minimum number of group instances
|
|
1122
|
+
</li>
|
|
1123
|
+
<li>
|
|
1124
|
+
<strong>repeat.max:</strong> Maximum number of group instances
|
|
1125
|
+
</li>
|
|
1126
|
+
<li>
|
|
1127
|
+
<strong>description:</strong> Group description (shows in
|
|
1128
|
+
tooltip)
|
|
1129
|
+
</li>
|
|
1130
|
+
<li>
|
|
1131
|
+
<strong>hint:</strong> Additional hint text (shows in tooltip)
|
|
1132
|
+
</li>
|
|
1133
|
+
<li>
|
|
1134
|
+
<strong>actions:</strong> Array of action buttons for readonly
|
|
1135
|
+
mode
|
|
1136
|
+
</li>
|
|
1137
|
+
<li>
|
|
1138
|
+
<strong>hidden:</strong> Hide field from form display but
|
|
1139
|
+
include in data (boolean)
|
|
1140
|
+
</li>
|
|
692
1141
|
</ul>
|
|
693
1142
|
</div>
|
|
694
1143
|
</div>
|
|
@@ -699,4 +1148,4 @@
|
|
|
699
1148
|
<script type="module" src="./form-builder.js"></script>
|
|
700
1149
|
<script type="module" src="./elements.js"></script>
|
|
701
1150
|
</body>
|
|
702
|
-
</html>
|
|
1151
|
+
</html>
|