@dmitryvim/form-builder 0.1.27 → 0.1.29

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 (5) hide show
  1. package/README.md +155 -22
  2. package/dist/demo.js +314 -321
  3. package/dist/form-builder.js +733 -460
  4. package/dist/index.html +89 -129
  5. package/package.json +6 -2
package/dist/index.html CHANGED
@@ -49,6 +49,52 @@
49
49
  .dark .resource-pill {
50
50
  @apply bg-blue-900/20 border-gray-600;
51
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
+ }
52
98
  </style>
53
99
  </head>
54
100
  <body class="bg-gray-50">
@@ -66,25 +112,15 @@
66
112
  <p class="text-xs text-gray-500">JSON Schema → Dynamic Forms</p>
67
113
  </div>
68
114
  </div>
69
- <div
70
- class="hidden bg-blue-50 border border-blue-200 rounded-lg p-2 text-xs text-blue-800"
71
- id="urlInfo"
72
- >
73
- <strong>💡 URL Schema:</strong> Add
74
- <code class="bg-blue-100 px-1 py-0.5 rounded font-mono"
75
- >?schema=BASE64</code
76
- >
77
- </div>
78
115
  </div>
79
116
  </div>
80
117
 
81
118
  <!-- Main Content -->
82
119
  <div class="p-4">
83
- <!-- Two Column Layout -->
84
- <div class="flex gap-4 h-full">
85
- <!-- Left Column: Schema & Form -->
86
- <div class="flex-1 space-y-4">
87
- <!-- Schema Input Card -->
120
+ <!-- Three Column Layout -->
121
+ <div class="grid grid-cols-3 gap-4 h-full">
122
+ <!-- Column 1: JSON Schema -->
123
+ <div class="space-y-4">
88
124
  <div class="bg-white rounded-lg shadow-sm border border-gray-200">
89
125
  <div class="p-4 border-b border-gray-200">
90
126
  <h3 class="text-lg font-semibold text-gray-900">JSON Schema</h3>
@@ -106,20 +142,15 @@
106
142
  </button>
107
143
  <button
108
144
  class="border border-gray-300 text-gray-700 px-3 py-2 rounded-lg hover:bg-gray-50 transition-colors text-sm"
109
- id="prettySchemaBtn"
145
+ id="formatSchemaBtn"
110
146
  >
111
147
  Format
112
148
  </button>
113
- <button
114
- class="border border-gray-300 text-gray-700 px-3 py-2 rounded-lg hover:bg-gray-50 transition-colors text-sm"
115
- id="downloadSchemaBtn"
116
- >
117
- Download
118
- </button>
119
149
  </div>
150
+
120
151
  <textarea
121
152
  id="schemaInput"
122
- 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 min-h-[300px]"
153
+ 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"
123
154
  spellcheck="false"
124
155
  placeholder="Paste your JSON schema here..."
125
156
  ></textarea>
@@ -130,16 +161,30 @@
130
161
  </div>
131
162
  </div>
132
163
  </div>
164
+ </div>
133
165
 
134
- <!-- Generated Form Card -->
166
+ <!-- Column 2: Generated Form -->
167
+ <div class="space-y-4">
135
168
  <div class="bg-white rounded-lg shadow-sm border border-gray-200">
136
169
  <div class="p-4 border-b border-gray-200">
137
- <h3 class="text-lg font-semibold text-gray-900">
138
- Generated Form
139
- </h3>
170
+ <div class="flex items-center justify-between">
171
+ <h3 class="text-lg font-semibold text-gray-900">
172
+ Generated Form
173
+ </h3>
174
+ <!-- Read Only Toggle -->
175
+ <div class="flex items-center space-x-3">
176
+ <span class="text-sm font-medium text-gray-700"
177
+ >Read Only</span
178
+ >
179
+ <label class="toggle-switch">
180
+ <input type="checkbox" id="readOnlyToggle" />
181
+ <span class="toggle-slider"></span>
182
+ </label>
183
+ </div>
184
+ </div>
140
185
  </div>
141
186
  <div class="p-4 space-y-4">
142
- <div id="formContainer" class="min-h-[200px]">
187
+ <div id="formContainer" class="min-h-96">
143
188
  <div class="text-center text-gray-500 py-8">
144
189
  Apply a schema to generate the form
145
190
  </div>
@@ -149,13 +194,7 @@
149
194
  class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors"
150
195
  id="submitBtn"
151
196
  >
152
- Submit Form
153
- </button>
154
- <button
155
- class="bg-gray-600 text-white px-4 py-2 rounded-lg hover:bg-gray-700 transition-colors"
156
- id="saveDraftBtn"
157
- >
158
- Save Draft
197
+ Submit
159
198
  </button>
160
199
  <button
161
200
  class="border border-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-50 transition-colors"
@@ -172,131 +211,52 @@
172
211
  </div>
173
212
  </div>
174
213
 
175
- <!-- Right Column: Output & Prefill -->
176
- <div class="flex-1 space-y-4">
177
- <!-- Form Output Card -->
178
- <div class="bg-white rounded-lg shadow-sm border border-gray-200">
179
- <div class="p-4 border-b border-gray-200">
180
- <h3 class="text-lg font-semibold text-gray-900">Form Output</h3>
181
- </div>
182
- <div class="p-4 space-y-4">
183
- <div class="space-y-2">
184
- <div class="flex gap-2 flex-wrap">
185
- <button
186
- class="bg-gray-600 text-white px-3 py-2 rounded-lg hover:bg-gray-700 transition-colors text-sm"
187
- id="copyOutputBtn"
188
- >
189
- Copy JSON
190
- </button>
191
- <button
192
- class="border border-gray-300 text-gray-700 px-3 py-2 rounded-lg hover:bg-gray-50 transition-colors text-sm"
193
- id="downloadOutputBtn"
194
- >
195
- Download
196
- </button>
197
- <button
198
- class="border border-gray-300 text-gray-700 px-3 py-2 rounded-lg hover:bg-gray-50 transition-colors text-sm"
199
- id="shareUrlBtn"
200
- >
201
- Share URL
202
- </button>
203
- </div>
204
- <textarea
205
- id="outputJson"
206
- 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 min-h-[300px]"
207
- readonly
208
- placeholder="Submit the form to see the output JSON here..."
209
- ></textarea>
210
- </div>
211
- </div>
212
- </div>
213
-
214
- <!-- Prefill Data Card -->
214
+ <!-- Column 3: Data -->
215
+ <div class="space-y-4">
215
216
  <div class="bg-white rounded-lg shadow-sm border border-gray-200">
216
217
  <div class="p-4 border-b border-gray-200">
217
- <h3 class="text-lg font-semibold text-gray-900">Prefill Data</h3>
218
+ <h3 class="text-lg font-semibold text-gray-900">Data</h3>
218
219
  </div>
219
220
  <div class="p-4 space-y-4">
220
221
  <div class="space-y-2">
221
222
  <div class="flex gap-2 flex-wrap">
222
223
  <button
223
224
  class="bg-gray-600 text-white px-3 py-2 rounded-lg hover:bg-gray-700 transition-colors text-sm"
224
- id="loadPrefillBtn"
225
+ id="prefillBtn"
225
226
  >
226
- Load Prefill
227
+ Prefill
227
228
  </button>
228
229
  <button
229
230
  class="border border-gray-300 text-gray-700 px-3 py-2 rounded-lg hover:bg-gray-50 transition-colors text-sm"
230
- id="copyTemplateBtn"
231
+ id="copyDataBtn"
231
232
  >
232
- Generate Template
233
- </button>
234
- </div>
235
- <textarea
236
- id="prefillInput"
237
- 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 min-h-[200px]"
238
- spellcheck="false"
239
- placeholder='{"field1": "value1", "field2": "value2", ...}'
240
- ></textarea>
241
- <div
242
- id="prefillErrors"
243
- class="hidden text-red-600 text-sm bg-red-50 border border-red-200 rounded-lg p-3"
244
- ></div>
245
- </div>
246
- </div>
247
- </div>
248
-
249
- <!-- Read-only Demo Card -->
250
- <div class="bg-white rounded-lg shadow-sm border border-gray-200">
251
- <div class="p-4 border-b border-gray-200">
252
- <h3 class="text-lg font-semibold text-gray-900">
253
- Read-only Demo
254
- </h3>
255
- <p class="text-sm text-gray-600 mt-1">
256
- FormBuilder в readonly режиме
257
- </p>
258
- </div>
259
- <div class="p-4 space-y-4">
260
- <div class="space-y-2">
261
- <div class="flex gap-2 flex-wrap">
262
- <button
263
- class="bg-blue-600 text-white px-3 py-2 rounded-lg hover:bg-blue-700 transition-colors text-sm"
264
- id="applyReadonlyBtn"
265
- >
266
- Apply Readonly
233
+ Copy JSON
267
234
  </button>
268
235
  <button
269
236
  class="border border-gray-300 text-gray-700 px-3 py-2 rounded-lg hover:bg-gray-50 transition-colors text-sm"
270
- id="clearReadonlyBtn"
237
+ id="downloadDataBtn"
271
238
  >
272
- Clear
239
+ Download
273
240
  </button>
274
241
  </div>
275
242
  <textarea
276
- id="readonlySchemaInput"
277
- 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 min-h-[150px]"
243
+ id="dataTextarea"
244
+ 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"
278
245
  spellcheck="false"
279
- placeholder='{"version": "0.3", "title": "Results", "elements": [...]}'
246
+ placeholder="Form data will appear here after submission or can be entered manually for prefilling..."
280
247
  ></textarea>
281
248
  <div
282
- id="readonlyErrors"
249
+ id="dataErrors"
283
250
  class="hidden text-red-600 text-sm bg-red-50 border border-red-200 rounded-lg p-3"
284
251
  ></div>
285
252
  </div>
286
- <div
287
- id="readonlyDemoContainer"
288
- class="min-h-[200px] border border-gray-200 rounded-lg p-4"
289
- >
290
- <div class="text-center text-gray-500 py-8">
291
- Apply a schema to see readonly mode
292
- </div>
293
- </div>
294
253
  </div>
295
254
  </div>
296
255
  </div>
297
256
  </div>
298
257
  </div>
299
- <script src="./form-builder.js"></script>
300
- <script src="./demo.js"></script>
258
+
259
+ <script type="module" src="./form-builder.js"></script>
260
+ <script type="module" src="./demo.js"></script>
301
261
  </body>
302
262
  </html>
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "publishConfig": {
4
4
  "access": "public"
5
5
  },
6
- "version": "0.1.27",
6
+ "version": "0.1.29",
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,8 +25,10 @@
25
25
  "dev": "npm run build && serve dist --single",
26
26
  "test": "jest",
27
27
  "format": "prettier --write .",
28
+ "lint": "eslint src/ public/ test/ *.config.js",
29
+ "lint:fix": "eslint src/ public/ test/ *.config.js --fix",
28
30
  "prepare": "npm run build",
29
- "prepublishOnly": "npm run test && npm run build"
31
+ "prepublishOnly": "npm run test && npm run lint && npm run build"
30
32
  },
31
33
  "keywords": [
32
34
  "form",
@@ -41,6 +43,8 @@
41
43
  "url": "git+https://github.com/picazru/form-builder.git"
42
44
  },
43
45
  "devDependencies": {
46
+ "@eslint/js": "^9.35.0",
47
+ "eslint": "^9.35.0",
44
48
  "jest": "^29.0.0",
45
49
  "jest-environment-jsdom": "^29.7.0",
46
50
  "prettier": "^3.0.0",