@dmitryvim/form-builder 0.1.34 → 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.
Files changed (6) hide show
  1. package/dist/demo.js +151 -10
  2. package/dist/elements.html +1 -22
  3. package/dist/elements.js +1 -1
  4. package/dist/form-builder.js +325 -621
  5. package/dist/index.html +66 -41
  6. package/package.json +3 -8
package/dist/index.html CHANGED
@@ -4,28 +4,7 @@
4
4
  <meta charset="utf-8" />
5
5
  <title>Form Builder - JSON Schema to Dynamic Forms</title>
6
6
  <meta name="viewport" content="width=device-width, initial-scale=1" />
7
- <!-- Development only - replace with local Tailwind build for production -->
8
- <script>
9
- if (
10
- location.hostname === "localhost" ||
11
- location.hostname === "127.0.0.1" ||
12
- location.protocol === "file:"
13
- ) {
14
- // Development environment - load Tailwind CDN
15
- const script = document.createElement("script");
16
- script.src = "https://cdn.tailwindcss.com";
17
- document.head.appendChild(script);
18
- } else {
19
- // Production environment - load local CSS (implement local build)
20
- console.warn(
21
- "Production mode: Please implement local Tailwind CSS build",
22
- );
23
- const link = document.createElement("link");
24
- link.rel = "stylesheet";
25
- link.href = "./tailwind.min.css"; // Local build file
26
- document.head.appendChild(link);
27
- }
28
- </script>
7
+ <script src="https://cdn.tailwindcss.com"></script>
29
8
  <script>
30
9
  tailwind.config = {
31
10
  darkMode: "media",
@@ -144,18 +123,20 @@
144
123
  </div>
145
124
 
146
125
  <!-- Main Content -->
147
- <div class="p-4">
126
+ <div class="p-4" style="height: calc(100vh - 80px)">
148
127
  <!-- Three Column Layout -->
149
128
  <div class="grid grid-cols-3 gap-4 h-full">
150
129
  <!-- Column 1: JSON Schema -->
151
- <div class="space-y-4">
152
- <div class="bg-white rounded-lg shadow-sm border border-gray-200">
153
- <div class="p-4 border-b border-gray-200">
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">
154
135
  <h3 class="text-lg font-semibold text-gray-900">JSON Schema</h3>
155
136
  </div>
156
- <div class="p-4 space-y-4">
157
- <div class="space-y-2">
158
- <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">
159
140
  <button
160
141
  class="bg-blue-600 text-white px-3 py-2 rounded-lg hover:bg-blue-700 transition-colors text-sm"
161
142
  id="applySchemaBtn"
@@ -178,13 +159,13 @@
178
159
 
179
160
  <textarea
180
161
  id="schemaInput"
181
- 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-y h-96"
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"
182
163
  spellcheck="false"
183
164
  placeholder="Paste your JSON schema here..."
184
165
  ></textarea>
185
166
  <div
186
167
  id="schemaErrors"
187
- 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"
188
169
  ></div>
189
170
  </div>
190
171
  </div>
@@ -192,7 +173,7 @@
192
173
  </div>
193
174
 
194
175
  <!-- Column 2: Generated Form -->
195
- <div class="space-y-4">
176
+ <div class="space-y-4 overflow-y-auto" id="column2-reference">
196
177
  <div class="bg-white rounded-lg shadow-sm border border-gray-200">
197
178
  <div class="p-4 border-b border-gray-200">
198
179
  <div class="flex items-center justify-between">
@@ -239,15 +220,19 @@
239
220
  </div>
240
221
  </div>
241
222
 
242
- <!-- Column 3: Data -->
243
- <div class="space-y-4">
244
- <div class="bg-white rounded-lg shadow-sm border border-gray-200">
245
- <div class="p-4 border-b border-gray-200">
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">
246
231
  <h3 class="text-lg font-semibold text-gray-900">Data</h3>
247
232
  </div>
248
- <div class="p-4 space-y-4">
249
- <div class="space-y-2">
250
- <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">
251
236
  <button
252
237
  class="bg-gray-600 text-white px-3 py-2 rounded-lg hover:bg-gray-700 transition-colors text-sm"
253
238
  id="prefillBtn"
@@ -269,13 +254,53 @@
269
254
  </div>
270
255
  <textarea
271
256
  id="dataTextarea"
272
- 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-y h-96"
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"
273
258
  spellcheck="false"
274
259
  placeholder="Form data will appear here after submission or can be entered manually for prefilling..."
275
260
  ></textarea>
276
261
  <div
277
262
  id="dataErrors"
278
- 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='[{"related_field": "fieldName", "value": "action-key", "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"
279
304
  ></div>
280
305
  </div>
281
306
  </div>
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "publishConfig": {
4
4
  "access": "public"
5
5
  },
6
- "version": "0.1.34",
6
+ "version": "0.1.37",
7
7
  "description": "A reusable JSON schema form builder library",
8
8
  "main": "dist/form-builder.js",
9
9
  "module": "dist/form-builder.js",
@@ -25,9 +25,8 @@
25
25
  "dev": "npm run build && serve dist --single",
26
26
  "test": "jest",
27
27
  "format": "prettier --write .",
28
- "lint": "eslint src/ public/ *.config.js",
29
- "lint:fix": "eslint src/ public/ *.config.js --fix",
30
- "sec:scan": "node tools/sec-scan.js",
28
+ "lint": "eslint src/ public/ test/ *.config.js",
29
+ "lint:fix": "eslint src/ public/ test/ *.config.js --fix",
31
30
  "prepare": "npm run build",
32
31
  "prepublishOnly": "npm run test && npm run lint && npm run build"
33
32
  },
@@ -45,11 +44,7 @@
45
44
  },
46
45
  "devDependencies": {
47
46
  "@eslint/js": "^9.35.0",
48
- "@html-eslint/eslint-plugin": "^0.46.2",
49
- "@html-eslint/parser": "^0.46.2",
50
47
  "eslint": "^9.35.0",
51
- "eslint-plugin-no-unsanitized": "^4.1.4",
52
- "eslint-plugin-security": "^3.0.1",
53
48
  "jest": "^29.0.0",
54
49
  "jest-environment-jsdom": "^29.7.0",
55
50
  "prettier": "^3.0.0",