@dmitryvim/form-builder 0.1.42 → 0.2.1
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 +260 -22
- package/dist/browser/formbuilder.min.js +184 -0
- package/dist/browser/formbuilder.v0.2.1.min.js +184 -0
- package/dist/cjs/index.cjs +3652 -0
- package/dist/cjs/index.cjs.map +1 -0
- package/dist/esm/index.js +3603 -0
- package/dist/esm/index.js.map +1 -0
- package/dist/form-builder.js +154 -3369
- package/dist/types/components/container.d.ts +15 -0
- package/dist/types/components/file.d.ts +26 -0
- package/dist/types/components/group.d.ts +24 -0
- package/dist/types/components/index.d.ts +11 -0
- package/dist/types/components/number.d.ts +11 -0
- package/dist/types/components/registry.d.ts +15 -0
- package/dist/types/components/select.d.ts +11 -0
- package/dist/types/components/text.d.ts +11 -0
- package/dist/types/components/textarea.d.ts +11 -0
- package/dist/types/index.d.ts +33 -0
- package/dist/types/instance/FormBuilderInstance.d.ts +134 -0
- package/dist/types/instance/state.d.ts +13 -0
- package/dist/types/styles/theme.d.ts +63 -0
- package/dist/types/types/component-operations.d.ts +45 -0
- package/dist/types/types/config.d.ts +47 -0
- package/dist/types/types/index.d.ts +4 -0
- package/dist/types/types/schema.d.ts +115 -0
- package/dist/types/types/state.d.ts +11 -0
- package/dist/types/utils/helpers.d.ts +4 -0
- package/dist/types/utils/styles.d.ts +21 -0
- package/dist/types/utils/translation.d.ts +8 -0
- package/dist/types/utils/validation.d.ts +2 -0
- package/package.json +32 -15
- package/dist/demo.js +0 -861
- package/dist/elements.html +0 -1130
- package/dist/elements.js +0 -488
- package/dist/index.html +0 -315
package/dist/index.html
DELETED
|
@@ -1,315 +0,0 @@
|
|
|
1
|
-
<!doctype html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="utf-8" />
|
|
5
|
-
<title>Form Builder - JSON Schema to Dynamic Forms</title>
|
|
6
|
-
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
7
|
-
<script src="https://cdn.tailwindcss.com"></script>
|
|
8
|
-
<script>
|
|
9
|
-
tailwind.config = {
|
|
10
|
-
darkMode: "media",
|
|
11
|
-
theme: {
|
|
12
|
-
extend: {
|
|
13
|
-
fontFamily: {
|
|
14
|
-
mono: [
|
|
15
|
-
"ui-monospace",
|
|
16
|
-
"SFMono-Regular",
|
|
17
|
-
"Menlo",
|
|
18
|
-
"Monaco",
|
|
19
|
-
"Consolas",
|
|
20
|
-
'"Liberation Mono"',
|
|
21
|
-
'"Courier New"',
|
|
22
|
-
"monospace",
|
|
23
|
-
],
|
|
24
|
-
},
|
|
25
|
-
},
|
|
26
|
-
},
|
|
27
|
-
};
|
|
28
|
-
</script>
|
|
29
|
-
<style>
|
|
30
|
-
/* Custom styles for form validation states */
|
|
31
|
-
.invalid {
|
|
32
|
-
@apply border-red-500 !important;
|
|
33
|
-
}
|
|
34
|
-
.field-hint {
|
|
35
|
-
@apply text-gray-500 text-xs mt-1;
|
|
36
|
-
}
|
|
37
|
-
.error-message {
|
|
38
|
-
@apply text-red-500 text-xs mt-1;
|
|
39
|
-
}
|
|
40
|
-
.file-preview-container {
|
|
41
|
-
@apply mb-3 p-3 border border-dashed border-gray-300 rounded-lg min-h-[60px] flex items-center justify-center bg-blue-50;
|
|
42
|
-
}
|
|
43
|
-
.dark .file-preview-container {
|
|
44
|
-
@apply bg-blue-900/20 border-gray-600;
|
|
45
|
-
}
|
|
46
|
-
.resource-pill {
|
|
47
|
-
@apply inline-flex items-center gap-1.5 bg-blue-50 border border-gray-300 rounded-full px-2.5 py-1 font-mono text-xs m-0.5;
|
|
48
|
-
}
|
|
49
|
-
.dark .resource-pill {
|
|
50
|
-
@apply bg-blue-900/20 border-gray-600;
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
/* Toggle switch styles */
|
|
54
|
-
.toggle-switch {
|
|
55
|
-
position: relative;
|
|
56
|
-
display: inline-block;
|
|
57
|
-
width: 60px;
|
|
58
|
-
height: 34px;
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
.toggle-switch input {
|
|
62
|
-
opacity: 0;
|
|
63
|
-
width: 0;
|
|
64
|
-
height: 0;
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
.toggle-slider {
|
|
68
|
-
position: absolute;
|
|
69
|
-
cursor: pointer;
|
|
70
|
-
top: 0;
|
|
71
|
-
left: 0;
|
|
72
|
-
right: 0;
|
|
73
|
-
bottom: 0;
|
|
74
|
-
background-color: #ccc;
|
|
75
|
-
transition: 0.4s;
|
|
76
|
-
border-radius: 34px;
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
.toggle-slider:before {
|
|
80
|
-
position: absolute;
|
|
81
|
-
content: "";
|
|
82
|
-
height: 26px;
|
|
83
|
-
width: 26px;
|
|
84
|
-
left: 4px;
|
|
85
|
-
bottom: 4px;
|
|
86
|
-
background-color: white;
|
|
87
|
-
transition: 0.4s;
|
|
88
|
-
border-radius: 50%;
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
input:checked + .toggle-slider {
|
|
92
|
-
background-color: #2563eb;
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
input:checked + .toggle-slider:before {
|
|
96
|
-
transform: translateX(26px);
|
|
97
|
-
}
|
|
98
|
-
</style>
|
|
99
|
-
</head>
|
|
100
|
-
<body class="bg-gray-50">
|
|
101
|
-
<!-- Header -->
|
|
102
|
-
<div class="bg-white border-b border-gray-200 px-6 py-4">
|
|
103
|
-
<div class="flex items-center justify-between">
|
|
104
|
-
<div class="flex items-center space-x-3">
|
|
105
|
-
<div
|
|
106
|
-
class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center"
|
|
107
|
-
>
|
|
108
|
-
<span class="text-white font-bold text-sm">FB</span>
|
|
109
|
-
</div>
|
|
110
|
-
<div>
|
|
111
|
-
<h1 class="text-lg font-bold text-gray-800">Form Builder</h1>
|
|
112
|
-
<p class="text-xs text-gray-500">JSON Schema → Dynamic Forms</p>
|
|
113
|
-
</div>
|
|
114
|
-
</div>
|
|
115
|
-
<div class="flex items-center space-x-4">
|
|
116
|
-
<a
|
|
117
|
-
href="./elements.html"
|
|
118
|
-
class="text-sm text-blue-600 hover:text-blue-800"
|
|
119
|
-
>Element Types Documentation →</a
|
|
120
|
-
>
|
|
121
|
-
</div>
|
|
122
|
-
</div>
|
|
123
|
-
</div>
|
|
124
|
-
|
|
125
|
-
<!-- Main Content -->
|
|
126
|
-
<div class="p-4" style="height: calc(100vh - 80px)">
|
|
127
|
-
<!-- Three Column Layout -->
|
|
128
|
-
<div class="grid grid-cols-3 gap-4 h-full">
|
|
129
|
-
<!-- Column 1: JSON Schema -->
|
|
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">
|
|
135
|
-
<h3 class="text-lg font-semibold text-gray-900">JSON Schema</h3>
|
|
136
|
-
</div>
|
|
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">
|
|
140
|
-
<button
|
|
141
|
-
class="bg-blue-600 text-white px-3 py-2 rounded-lg hover:bg-blue-700 transition-colors text-sm"
|
|
142
|
-
id="applySchemaBtn"
|
|
143
|
-
>
|
|
144
|
-
Apply Schema
|
|
145
|
-
</button>
|
|
146
|
-
<button
|
|
147
|
-
class="border border-gray-300 text-gray-700 px-3 py-2 rounded-lg hover:bg-gray-50 transition-colors text-sm"
|
|
148
|
-
id="resetSchemaBtn"
|
|
149
|
-
>
|
|
150
|
-
Reset Example
|
|
151
|
-
</button>
|
|
152
|
-
<button
|
|
153
|
-
class="border border-gray-300 text-gray-700 px-3 py-2 rounded-lg hover:bg-gray-50 transition-colors text-sm"
|
|
154
|
-
id="formatSchemaBtn"
|
|
155
|
-
>
|
|
156
|
-
Format
|
|
157
|
-
</button>
|
|
158
|
-
</div>
|
|
159
|
-
|
|
160
|
-
<textarea
|
|
161
|
-
id="schemaInput"
|
|
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"
|
|
163
|
-
spellcheck="false"
|
|
164
|
-
placeholder="Paste your JSON schema here..."
|
|
165
|
-
></textarea>
|
|
166
|
-
<div
|
|
167
|
-
id="schemaErrors"
|
|
168
|
-
class="hidden text-red-600 text-sm bg-red-50 border border-red-200 rounded-lg p-3 mt-2 flex-shrink-0"
|
|
169
|
-
></div>
|
|
170
|
-
</div>
|
|
171
|
-
</div>
|
|
172
|
-
</div>
|
|
173
|
-
</div>
|
|
174
|
-
|
|
175
|
-
<!-- Column 2: Generated Form -->
|
|
176
|
-
<div class="space-y-4 overflow-y-auto" id="column2-reference">
|
|
177
|
-
<div class="bg-white rounded-lg shadow-sm border border-gray-200">
|
|
178
|
-
<div class="p-4 border-b border-gray-200">
|
|
179
|
-
<div class="flex items-center justify-between">
|
|
180
|
-
<h3 class="text-lg font-semibold text-gray-900">
|
|
181
|
-
Generated Form
|
|
182
|
-
</h3>
|
|
183
|
-
<!-- Read Only Toggle -->
|
|
184
|
-
<div class="flex items-center space-x-3">
|
|
185
|
-
<span class="text-sm font-medium text-gray-700"
|
|
186
|
-
>Read Only</span
|
|
187
|
-
>
|
|
188
|
-
<label class="toggle-switch">
|
|
189
|
-
<input type="checkbox" id="readOnlyToggle" />
|
|
190
|
-
<span class="toggle-slider"></span>
|
|
191
|
-
</label>
|
|
192
|
-
</div>
|
|
193
|
-
</div>
|
|
194
|
-
</div>
|
|
195
|
-
<div class="p-4 space-y-4">
|
|
196
|
-
<div id="formContainer" class="min-h-96">
|
|
197
|
-
<div class="text-center text-gray-500 py-8">
|
|
198
|
-
Apply a schema to generate the form
|
|
199
|
-
</div>
|
|
200
|
-
</div>
|
|
201
|
-
<div class="flex gap-2 flex-wrap pt-4 border-t border-gray-200">
|
|
202
|
-
<button
|
|
203
|
-
class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors"
|
|
204
|
-
id="submitBtn"
|
|
205
|
-
>
|
|
206
|
-
Submit
|
|
207
|
-
</button>
|
|
208
|
-
<button
|
|
209
|
-
class="border border-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-50 transition-colors"
|
|
210
|
-
id="clearFormBtn"
|
|
211
|
-
>
|
|
212
|
-
Clear Values
|
|
213
|
-
</button>
|
|
214
|
-
</div>
|
|
215
|
-
<div
|
|
216
|
-
id="formErrors"
|
|
217
|
-
class="hidden text-red-600 text-sm bg-red-50 border border-red-200 rounded-lg p-3"
|
|
218
|
-
></div>
|
|
219
|
-
</div>
|
|
220
|
-
</div>
|
|
221
|
-
</div>
|
|
222
|
-
|
|
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">
|
|
231
|
-
<h3 class="text-lg font-semibold text-gray-900">Data</h3>
|
|
232
|
-
</div>
|
|
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">
|
|
236
|
-
<button
|
|
237
|
-
class="bg-gray-600 text-white px-3 py-2 rounded-lg hover:bg-gray-700 transition-colors text-sm"
|
|
238
|
-
id="prefillBtn"
|
|
239
|
-
>
|
|
240
|
-
Prefill
|
|
241
|
-
</button>
|
|
242
|
-
<button
|
|
243
|
-
class="border border-gray-300 text-gray-700 px-3 py-2 rounded-lg hover:bg-gray-50 transition-colors text-sm"
|
|
244
|
-
id="copyDataBtn"
|
|
245
|
-
>
|
|
246
|
-
Copy JSON
|
|
247
|
-
</button>
|
|
248
|
-
<button
|
|
249
|
-
class="border border-gray-300 text-gray-700 px-3 py-2 rounded-lg hover:bg-gray-50 transition-colors text-sm"
|
|
250
|
-
id="downloadDataBtn"
|
|
251
|
-
>
|
|
252
|
-
Download
|
|
253
|
-
</button>
|
|
254
|
-
</div>
|
|
255
|
-
<textarea
|
|
256
|
-
id="dataTextarea"
|
|
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"
|
|
258
|
-
spellcheck="false"
|
|
259
|
-
placeholder="Form data will appear here after submission or can be entered manually for prefilling..."
|
|
260
|
-
></textarea>
|
|
261
|
-
<div
|
|
262
|
-
id="dataErrors"
|
|
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"
|
|
304
|
-
></div>
|
|
305
|
-
</div>
|
|
306
|
-
</div>
|
|
307
|
-
</div>
|
|
308
|
-
</div>
|
|
309
|
-
</div>
|
|
310
|
-
</div>
|
|
311
|
-
|
|
312
|
-
<script type="module" src="./form-builder.js"></script>
|
|
313
|
-
<script type="module" src="./demo.js"></script>
|
|
314
|
-
</body>
|
|
315
|
-
</html>
|