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