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