@dmitryvim/form-builder 0.1.35 → 0.1.38
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +10 -5
- package/dist/demo.js +182 -54
- package/dist/elements.html +588 -160
- package/dist/elements.js +270 -232
- package/dist/form-builder.js +426 -134
- package/dist/index.html +70 -20
- package/package.json +1 -1
- package/docs/13_form_builder.html +0 -1337
- package/docs/REQUIREMENTS.md +0 -313
- package/docs/integration.md +0 -480
- package/docs/schema.md +0 -433
package/dist/index.html
CHANGED
|
@@ -113,24 +113,30 @@
|
|
|
113
113
|
</div>
|
|
114
114
|
</div>
|
|
115
115
|
<div class="flex items-center space-x-4">
|
|
116
|
-
<a
|
|
116
|
+
<a
|
|
117
|
+
href="./elements.html"
|
|
118
|
+
class="text-sm text-blue-600 hover:text-blue-800"
|
|
119
|
+
>Element Types Documentation →</a
|
|
120
|
+
>
|
|
117
121
|
</div>
|
|
118
122
|
</div>
|
|
119
123
|
</div>
|
|
120
124
|
|
|
121
125
|
<!-- Main Content -->
|
|
122
|
-
<div class="p-4">
|
|
126
|
+
<div class="p-4" style="height: calc(100vh - 80px)">
|
|
123
127
|
<!-- Three Column Layout -->
|
|
124
128
|
<div class="grid grid-cols-3 gap-4 h-full">
|
|
125
129
|
<!-- Column 1: JSON Schema -->
|
|
126
|
-
<div class="
|
|
127
|
-
<div
|
|
128
|
-
|
|
130
|
+
<div class="flex flex-col h-full">
|
|
131
|
+
<div
|
|
132
|
+
class="bg-white rounded-lg shadow-sm border border-gray-200 flex flex-col h-full"
|
|
133
|
+
>
|
|
134
|
+
<div class="p-4 border-b border-gray-200 flex-shrink-0">
|
|
129
135
|
<h3 class="text-lg font-semibold text-gray-900">JSON Schema</h3>
|
|
130
136
|
</div>
|
|
131
|
-
<div class="p-4
|
|
132
|
-
<div class="
|
|
133
|
-
<div class="flex gap-2 flex-wrap">
|
|
137
|
+
<div class="p-4 flex flex-col flex-1 min-h-0">
|
|
138
|
+
<div class="flex flex-col h-full">
|
|
139
|
+
<div class="flex gap-2 flex-wrap mb-4 flex-shrink-0">
|
|
134
140
|
<button
|
|
135
141
|
class="bg-blue-600 text-white px-3 py-2 rounded-lg hover:bg-blue-700 transition-colors text-sm"
|
|
136
142
|
id="applySchemaBtn"
|
|
@@ -153,13 +159,13 @@
|
|
|
153
159
|
|
|
154
160
|
<textarea
|
|
155
161
|
id="schemaInput"
|
|
156
|
-
class="w-full 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 resize-
|
|
162
|
+
class="w-full 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 resize-none flex-1"
|
|
157
163
|
spellcheck="false"
|
|
158
164
|
placeholder="Paste your JSON schema here..."
|
|
159
165
|
></textarea>
|
|
160
166
|
<div
|
|
161
167
|
id="schemaErrors"
|
|
162
|
-
class="hidden text-red-600 text-sm bg-red-50 border border-red-200 rounded-lg p-3"
|
|
168
|
+
class="hidden text-red-600 text-sm bg-red-50 border border-red-200 rounded-lg p-3 mt-2 flex-shrink-0"
|
|
163
169
|
></div>
|
|
164
170
|
</div>
|
|
165
171
|
</div>
|
|
@@ -167,7 +173,7 @@
|
|
|
167
173
|
</div>
|
|
168
174
|
|
|
169
175
|
<!-- Column 2: Generated Form -->
|
|
170
|
-
<div class="space-y-4">
|
|
176
|
+
<div class="space-y-4 overflow-y-auto" id="column2-reference">
|
|
171
177
|
<div class="bg-white rounded-lg shadow-sm border border-gray-200">
|
|
172
178
|
<div class="p-4 border-b border-gray-200">
|
|
173
179
|
<div class="flex items-center justify-between">
|
|
@@ -214,15 +220,19 @@
|
|
|
214
220
|
</div>
|
|
215
221
|
</div>
|
|
216
222
|
|
|
217
|
-
<!-- Column 3: Data -->
|
|
218
|
-
<div class="space-y-4">
|
|
219
|
-
|
|
220
|
-
|
|
223
|
+
<!-- Column 3: Data + Actions -->
|
|
224
|
+
<div class="flex flex-col h-full space-y-4">
|
|
225
|
+
<!-- Data Section (30% height) -->
|
|
226
|
+
<div
|
|
227
|
+
class="bg-white rounded-lg shadow-sm border border-gray-200 flex flex-col"
|
|
228
|
+
style="height: 30%"
|
|
229
|
+
>
|
|
230
|
+
<div class="p-4 border-b border-gray-200 flex-shrink-0">
|
|
221
231
|
<h3 class="text-lg font-semibold text-gray-900">Data</h3>
|
|
222
232
|
</div>
|
|
223
|
-
<div class="p-4
|
|
224
|
-
<div class="
|
|
225
|
-
<div class="flex gap-2 flex-wrap">
|
|
233
|
+
<div class="p-4 flex flex-col flex-1 min-h-0">
|
|
234
|
+
<div class="flex flex-col h-full">
|
|
235
|
+
<div class="flex gap-2 flex-wrap mb-4 flex-shrink-0">
|
|
226
236
|
<button
|
|
227
237
|
class="bg-gray-600 text-white px-3 py-2 rounded-lg hover:bg-gray-700 transition-colors text-sm"
|
|
228
238
|
id="prefillBtn"
|
|
@@ -244,13 +254,53 @@
|
|
|
244
254
|
</div>
|
|
245
255
|
<textarea
|
|
246
256
|
id="dataTextarea"
|
|
247
|
-
class="w-full 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 resize-
|
|
257
|
+
class="w-full 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 resize-none flex-1"
|
|
248
258
|
spellcheck="false"
|
|
249
259
|
placeholder="Form data will appear here after submission or can be entered manually for prefilling..."
|
|
250
260
|
></textarea>
|
|
251
261
|
<div
|
|
252
262
|
id="dataErrors"
|
|
253
|
-
class="hidden text-red-600 text-sm bg-red-50 border border-red-200 rounded-lg p-3"
|
|
263
|
+
class="hidden text-red-600 text-sm bg-red-50 border border-red-200 rounded-lg p-3 mt-2 flex-shrink-0"
|
|
264
|
+
></div>
|
|
265
|
+
</div>
|
|
266
|
+
</div>
|
|
267
|
+
</div>
|
|
268
|
+
|
|
269
|
+
<!-- Actions Section (70% height) -->
|
|
270
|
+
<div
|
|
271
|
+
class="bg-white rounded-lg shadow-sm border border-gray-200 flex flex-col flex-1"
|
|
272
|
+
>
|
|
273
|
+
<div class="p-4 border-b border-gray-200 flex-shrink-0">
|
|
274
|
+
<h3 class="text-lg font-semibold text-gray-900">Actions</h3>
|
|
275
|
+
<p class="text-xs text-gray-500 mt-1">
|
|
276
|
+
External actions for readonly mode
|
|
277
|
+
</p>
|
|
278
|
+
</div>
|
|
279
|
+
<div class="p-4 flex flex-col flex-1 min-h-0">
|
|
280
|
+
<div class="flex flex-col h-full">
|
|
281
|
+
<div class="flex gap-2 flex-wrap mb-4 flex-shrink-0">
|
|
282
|
+
<button
|
|
283
|
+
class="border border-gray-300 text-gray-700 px-3 py-2 rounded-lg hover:bg-gray-50 transition-colors text-sm"
|
|
284
|
+
id="formatActionsBtn"
|
|
285
|
+
>
|
|
286
|
+
Format
|
|
287
|
+
</button>
|
|
288
|
+
<button
|
|
289
|
+
class="border border-gray-300 text-gray-700 px-3 py-2 rounded-lg hover:bg-gray-50 transition-colors text-sm"
|
|
290
|
+
id="clearActionsBtn"
|
|
291
|
+
>
|
|
292
|
+
Clear
|
|
293
|
+
</button>
|
|
294
|
+
</div>
|
|
295
|
+
<textarea
|
|
296
|
+
id="actionsTextarea"
|
|
297
|
+
class="w-full 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 resize-none flex-1"
|
|
298
|
+
spellcheck="false"
|
|
299
|
+
placeholder='[{"key": "action-key", "value": "specific-value", "related_field": "fieldName", "label": "Button Label"}]'
|
|
300
|
+
></textarea>
|
|
301
|
+
<div
|
|
302
|
+
id="actionsErrors"
|
|
303
|
+
class="hidden text-red-600 text-sm bg-red-50 border border-red-200 rounded-lg p-3 mt-2 flex-shrink-0"
|
|
254
304
|
></div>
|
|
255
305
|
</div>
|
|
256
306
|
</div>
|