@twintag/twintag-form 1.6.1 → 1.6.2-beta.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.
Files changed (27) hide show
  1. package/.turbo/turbo-build.log +11 -11
  2. package/CHANGELOG.md +221 -209
  3. package/README.md +407 -370
  4. package/dev/index.css +32 -32
  5. package/dev/main.tsx +460 -459
  6. package/dist/components/fields/date-picker.d.ts +1 -1
  7. package/dist/components/fields/file.d.ts +1 -1
  8. package/dist/components/fields/input.d.ts +1 -1
  9. package/dist/components/fields/textarea.d.ts +1 -1
  10. package/dist/components/provider.d.ts +1 -6
  11. package/dist/index.cjs +1 -1
  12. package/dist/index.d.ts +4 -3
  13. package/dist/index.js +152 -143
  14. package/dist/types/index.d.ts +16 -6
  15. package/dist/webcomponent.cjs +1 -1
  16. package/dist/webcomponent.d.ts +1 -1
  17. package/dist/webcomponent.js +3 -0
  18. package/lib/components/fields/date-picker.tsx +154 -154
  19. package/lib/components/fields/file.tsx +84 -83
  20. package/lib/components/fields/input.tsx +70 -70
  21. package/lib/components/fields/textarea.tsx +72 -68
  22. package/lib/components/provider.tsx +162 -163
  23. package/lib/index.tsx +45 -41
  24. package/lib/types/index.ts +102 -82
  25. package/lib/webcomponent.ts +2 -2
  26. package/package.json +1 -1
  27. package/vite.config.ts +2 -1
package/dev/main.tsx CHANGED
@@ -1,459 +1,460 @@
1
- import type { ComponentProps } from 'react';
2
- import type { Form } from '../lib';
3
-
4
- import '../lib/webcomponent';
5
- import './index.css';
6
-
7
- const config = [
8
- {
9
- type: 'label',
10
- props: {
11
- label: 'Custom label',
12
- },
13
- },
14
- {
15
- type: 'category',
16
- props: {
17
- label: 'Category 1st',
18
- },
19
- children: [
20
- {
21
- type: 'input',
22
- props: {
23
- subtype: 'toggle',
24
- label: 'Switch',
25
- bind: 'switch',
26
- options: {
27
- description: 'this field is required',
28
- },
29
- },
30
- },
31
- {
32
- type: 'input',
33
- props: {
34
- subtype: 'tri-toggle',
35
- label: 'Tri-toggle',
36
- bind: 'tri-toggle-bind',
37
- options: {
38
- description: 'this field is never required',
39
- },
40
- },
41
- },
42
- {
43
- type: 'input',
44
- props: {
45
- subtype: 'datepicker',
46
- label: 'Date picker',
47
- bind: 'datepicker',
48
- options: {
49
- description: 'this field is required',
50
- },
51
- },
52
- },
53
- {
54
- type: 'accordion',
55
- props: {
56
- defaultValue: 'required2',
57
- },
58
- children: [
59
- {
60
- type: 'accordion',
61
- props: {
62
- subtype: 'item',
63
- label: 'Required 1',
64
- value: 'required1',
65
- icon: 'archive-box-x-mark',
66
- },
67
- children: [
68
- {
69
- type: 'input',
70
- props: {
71
- subtype: 'toggle',
72
- label: 'Required',
73
- bind: 'required',
74
- options: {
75
- description: 'this field is required',
76
- },
77
- },
78
- },
79
- ],
80
- },
81
- {
82
- type: 'accordion',
83
- props: {
84
- subtype: 'item',
85
- label: 'Required 2',
86
- value: 'required2',
87
- icon: 'archive-box-x-mark',
88
- },
89
- children: [
90
- {
91
- type: 'input',
92
- props: {
93
- subtype: 'toggle',
94
- label: 'Required',
95
- bind: 'required',
96
- options: {
97
- description: 'this field is required',
98
- },
99
- },
100
- },
101
- ],
102
- },
103
- ],
104
- },
105
- ],
106
- },
107
- {
108
- type: 'category',
109
- props: {
110
- label: 'Category 2nd',
111
- },
112
- children: [
113
- {
114
- type: 'input',
115
- props: {
116
- subtype: 'simple',
117
- label: 'Email',
118
- bind: 'email',
119
- options: {
120
- error: 'This field is required',
121
- description: 'This field is required',
122
- },
123
- },
124
- },
125
- {
126
- type: 'input',
127
- props: {
128
- subtype: 'radiogroup',
129
- label: 'Radio Group',
130
- bind: 'radiogroup',
131
- options: {
132
- description: 'This field is required',
133
- error: 'This field is required',
134
- },
135
- },
136
- children: [
137
- {
138
- type: 'item',
139
- props: {
140
- label: 'Checkbox',
141
- bind: 'checkbox',
142
- options: {
143
- description: 'This field is required',
144
- error: 'This field is required',
145
- },
146
- },
147
- },
148
- {
149
- type: 'item',
150
- props: {
151
- label: 'Mote',
152
- bind: 'mote',
153
- options: {
154
- description: 'This field is required',
155
- error: 'This field is required',
156
- },
157
- },
158
- },
159
- ],
160
- },
161
- ],
162
- },
163
- {
164
- type: 'category',
165
- props: {
166
- label: 'Category 3rd',
167
- },
168
- children: [
169
- {
170
- type: 'input',
171
- props: {
172
- subtype: 'file',
173
- label: 'File',
174
- bind: 'file',
175
- options: {
176
- error: 'This field is required',
177
- description: 'This field is required',
178
- },
179
- },
180
- },
181
- ],
182
- },
183
- {
184
- type: 'category',
185
- props: {
186
- label: 'Category 4th',
187
- },
188
- children: [
189
- {
190
- type: 'input',
191
- props: {
192
- subtype: 'textarea',
193
- label: 'Textarea',
194
- bind: 'textarea',
195
- options: {
196
- description: 'This field is required',
197
- error: 'This field is required',
198
- },
199
- },
200
- },
201
- {
202
- type: 'input',
203
- props: {
204
- subtype: 'checkbox',
205
- label: 'Checkbox',
206
- bind: 'checkbox',
207
- options: {
208
- description: 'This field is required',
209
- error: 'This field is required',
210
- },
211
- },
212
- },
213
- ],
214
- },
215
- {
216
- type: 'input',
217
- props: {
218
- subtype: 'submit',
219
- label: 'Submit',
220
- },
221
- },
222
- ] as React.ComponentProps<typeof Form>['config'];
223
-
224
- const config2 = [
225
- {
226
- type: 'category',
227
- props: {
228
- label: 'Category 1st',
229
- },
230
- children: [
231
- {
232
- type: 'input',
233
- props: {
234
- subtype: 'toggle',
235
- label: 'Switch',
236
- bind: 'switch',
237
- options: {
238
- description: 'this field is required',
239
- },
240
- },
241
- },
242
- {
243
- type: 'accordion',
244
- props: {
245
- defaultValue: 'required2',
246
- },
247
- children: [
248
- {
249
- type: 'accordion',
250
- props: {
251
- subtype: 'item',
252
- label: 'Required 2',
253
- value: 'required2',
254
- icon: 'archive-box-x-mark',
255
- },
256
- children: [
257
- {
258
- type: 'input',
259
- props: {
260
- subtype: 'toggle',
261
- label: 'Required',
262
- bind: 'required',
263
- options: {
264
- description: 'this field is required',
265
- },
266
- },
267
- },
268
- ],
269
- },
270
- ],
271
- },
272
- {
273
- type: 'input',
274
- props: {
275
- subtype: 'tri-toggle',
276
- label: 'Tri-toggle',
277
- bind: 'tri-toggle-bind',
278
- options: {
279
- description: 'this field is never required',
280
- },
281
- },
282
- },
283
- {
284
- type: 'input',
285
- props: {
286
- subtype: 'datepicker',
287
- label: 'Date picker',
288
- bind: 'datepicker',
289
- options: {
290
- description: 'this field is required',
291
- },
292
- },
293
- },
294
- ],
295
- },
296
- {
297
- type: 'category',
298
- props: {
299
- label: 'Category 2nd',
300
- },
301
- children: [
302
- {
303
- type: 'input',
304
- props: {
305
- subtype: 'simple',
306
- label: 'Email',
307
- bind: 'email',
308
- options: {
309
- error: 'This field is required',
310
- description: 'This field is required',
311
- },
312
- },
313
- },
314
- {
315
- type: 'input',
316
- props: {
317
- subtype: 'radiogroup',
318
- label: 'Radio Group',
319
- bind: 'radiogroup',
320
- options: {
321
- description: 'This field is required',
322
- error: 'This field is required',
323
- },
324
- },
325
- children: [
326
- {
327
- type: 'item',
328
- props: {
329
- label: 'Checkbox',
330
- bind: 'checkbox',
331
- options: {
332
- description: 'This field is required',
333
- error: 'This field is required',
334
- },
335
- },
336
- },
337
- {
338
- type: 'item',
339
- props: {
340
- label: 'Mote',
341
- bind: 'mote',
342
- options: {
343
- description: 'This field is required',
344
- error: 'This field is required',
345
- },
346
- },
347
- },
348
- ],
349
- },
350
- ],
351
- },
352
- {
353
- type: 'category',
354
- props: {
355
- label: 'Category 3rd',
356
- },
357
- children: [
358
- {
359
- type: 'input',
360
- props: {
361
- subtype: 'file',
362
- label: 'File',
363
- bind: 'file',
364
- options: {
365
- error: 'This field is required',
366
- description: 'This field is required',
367
- },
368
- },
369
- },
370
- ],
371
- },
372
- {
373
- type: 'category',
374
- props: {
375
- label: 'Category 4th',
376
- },
377
- children: [
378
- {
379
- type: 'input',
380
- props: {
381
- subtype: 'textarea',
382
- label: 'Textarea',
383
- bind: 'textarea',
384
- options: {
385
- description: 'This field is required',
386
- error: 'This field is required',
387
- },
388
- },
389
- },
390
- {
391
- type: 'input',
392
- props: {
393
- subtype: 'checkbox',
394
- label: 'Checkbox',
395
- bind: 'checkbox',
396
- options: {
397
- description: 'This field is required',
398
- error: 'This field is required',
399
- },
400
- },
401
- },
402
- ],
403
- },
404
- {
405
- type: 'input',
406
- props: {
407
- subtype: 'submit',
408
- label: 'Submit',
409
- },
410
- },
411
- ] as React.ComponentProps<typeof Form>['config'];
412
-
413
- const options = {
414
- defaultValues: {
415
- 'tri-toggle-bind': null,
416
- required: true,
417
- email: 'This should work',
418
- radiogroup: 'mote',
419
- checkbox: true,
420
- textarea: 'This is a textarea',
421
- },
422
- variant: 'outline',
423
- resetOnSubmit: true,
424
- } as ComponentProps<typeof Form>['options'];
425
-
426
- // the key properties for the defaultValues object are the same as the bind properties
427
- const form = document.querySelector('twintag-form');
428
-
429
- form?.setAttribute('config', JSON.stringify(config));
430
- form?.setAttribute('options', JSON.stringify(options));
431
-
432
- form?.addEventListener('twintag-form-values', (event) => {
433
- console.log('form values', (event as CustomEvent).detail);
434
- });
435
- form?.addEventListener('twintag-form-valid', (e) => {
436
- console.log('form valid', (e as CustomEvent).detail);
437
- });
438
- form?.addEventListener('twintag-form-invalid', (e) => {
439
- console.log('form invalid', (e as CustomEvent).detail);
440
- });
441
-
442
- const getValues = document.getElementById('get-values');
443
- getValues?.addEventListener('click', () => {
444
- form?.shadowRoot
445
- ?.querySelector('form')
446
- ?.dispatchEvent(new CustomEvent('twintag-form-get_values'));
447
- });
448
-
449
- const submit = document.getElementById('submit');
450
- submit?.addEventListener('click', () => {
451
- form?.shadowRoot
452
- ?.querySelector('form')
453
- ?.dispatchEvent(new CustomEvent('twintag-form-validate'));
454
- });
455
-
456
- const setConfig = document.getElementById('set-config');
457
- setConfig?.addEventListener('click', () => {
458
- form?.setAttribute('config', JSON.stringify(config2));
459
- });
1
+ import type { ComponentProps } from 'react';
2
+ import type { Form } from '../lib';
3
+
4
+ import '../dist/webcomponent';
5
+ import './index.css';
6
+
7
+ const config = [
8
+ {
9
+ type: 'label',
10
+ props: {
11
+ label: 'Custom label',
12
+ },
13
+ },
14
+ {
15
+ type: 'category',
16
+ props: {
17
+ label: 'Category 1st',
18
+ },
19
+ children: [
20
+ {
21
+ type: 'input',
22
+ props: {
23
+ subtype: 'toggle',
24
+ label: 'Switch',
25
+ bind: 'switch',
26
+ options: {
27
+ description: 'this field is required',
28
+ },
29
+ },
30
+ },
31
+ {
32
+ type: 'input',
33
+ props: {
34
+ subtype: 'tri-toggle',
35
+ label: 'Tri-toggle',
36
+ bind: 'tri-toggle-bind',
37
+ options: {
38
+ description: 'this field is never required',
39
+ },
40
+ },
41
+ },
42
+ {
43
+ type: 'input',
44
+ props: {
45
+ subtype: 'datepicker',
46
+ label: 'Date picker',
47
+ bind: 'datepicker',
48
+ options: {
49
+ description: 'this field is required',
50
+ },
51
+ },
52
+ },
53
+ {
54
+ type: 'accordion',
55
+ props: {
56
+ defaultValue: 'required2',
57
+ },
58
+ children: [
59
+ {
60
+ type: 'accordion',
61
+ props: {
62
+ subtype: 'item',
63
+ label: 'Required 1',
64
+ value: 'required1',
65
+ icon: 'archive-box-x-mark',
66
+ },
67
+ children: [
68
+ {
69
+ type: 'input',
70
+ props: {
71
+ subtype: 'toggle',
72
+ label: 'Required',
73
+ bind: 'required',
74
+ options: {
75
+ description: 'this field is required',
76
+ },
77
+ },
78
+ },
79
+ ],
80
+ },
81
+ {
82
+ type: 'accordion',
83
+ props: {
84
+ subtype: 'item',
85
+ label: 'Required 2',
86
+ value: 'required2',
87
+ icon: 'archive-box-x-mark',
88
+ },
89
+ children: [
90
+ {
91
+ type: 'input',
92
+ props: {
93
+ subtype: 'toggle',
94
+ label: 'Required',
95
+ bind: 'required',
96
+ options: {
97
+ description: 'this field is required',
98
+ },
99
+ },
100
+ },
101
+ ],
102
+ },
103
+ ],
104
+ },
105
+ ],
106
+ },
107
+ {
108
+ type: 'category',
109
+ props: {
110
+ label: 'Category 2nd',
111
+ },
112
+ children: [
113
+ {
114
+ type: 'input',
115
+ props: {
116
+ subtype: 'simple',
117
+ label: 'Email',
118
+ bind: 'email',
119
+ options: {
120
+ error: 'This field is required',
121
+ description: 'This field is required',
122
+ },
123
+ },
124
+ },
125
+ {
126
+ type: 'input',
127
+ props: {
128
+ subtype: 'radiogroup',
129
+ label: 'Radio Group',
130
+ bind: 'radiogroup',
131
+ options: {
132
+ description: 'This field is required',
133
+ error: 'This field is required',
134
+ },
135
+ },
136
+ children: [
137
+ {
138
+ type: 'item',
139
+ props: {
140
+ label: 'Checkbox',
141
+ bind: 'checkbox',
142
+ options: {
143
+ description: 'This field is required',
144
+ error: 'This field is required',
145
+ },
146
+ },
147
+ },
148
+ {
149
+ type: 'item',
150
+ props: {
151
+ label: 'Mote',
152
+ bind: 'mote',
153
+ options: {
154
+ description: 'This field is required',
155
+ error: 'This field is required',
156
+ },
157
+ },
158
+ },
159
+ ],
160
+ },
161
+ ],
162
+ },
163
+ {
164
+ type: 'category',
165
+ props: {
166
+ label: 'Category 3rd',
167
+ },
168
+ children: [
169
+ {
170
+ type: 'input',
171
+ props: {
172
+ subtype: 'file',
173
+ label: 'File',
174
+ bind: 'file',
175
+ options: {
176
+ error: 'This field is required',
177
+ description: 'This field is required',
178
+ accept: 'image/*',
179
+ },
180
+ },
181
+ },
182
+ ],
183
+ },
184
+ {
185
+ type: 'category',
186
+ props: {
187
+ label: 'Category 4th',
188
+ },
189
+ children: [
190
+ {
191
+ type: 'input',
192
+ props: {
193
+ subtype: 'textarea',
194
+ label: 'Textarea',
195
+ bind: 'textarea',
196
+ options: {
197
+ description: 'This field is required',
198
+ error: 'This field is required',
199
+ },
200
+ },
201
+ },
202
+ {
203
+ type: 'input',
204
+ props: {
205
+ subtype: 'checkbox',
206
+ label: 'Checkbox',
207
+ bind: 'checkbox',
208
+ options: {
209
+ description: 'This field is required',
210
+ error: 'This field is required',
211
+ },
212
+ },
213
+ },
214
+ ],
215
+ },
216
+ {
217
+ type: 'input',
218
+ props: {
219
+ subtype: 'submit',
220
+ label: 'Submit',
221
+ },
222
+ },
223
+ ] as React.ComponentProps<typeof Form>['config'];
224
+
225
+ const config2 = [
226
+ {
227
+ type: 'category',
228
+ props: {
229
+ label: 'Category 1st',
230
+ },
231
+ children: [
232
+ {
233
+ type: 'input',
234
+ props: {
235
+ subtype: 'toggle',
236
+ label: 'Switch',
237
+ bind: 'switch',
238
+ options: {
239
+ description: 'this field is required',
240
+ },
241
+ },
242
+ },
243
+ {
244
+ type: 'accordion',
245
+ props: {
246
+ defaultValue: 'required2',
247
+ },
248
+ children: [
249
+ {
250
+ type: 'accordion',
251
+ props: {
252
+ subtype: 'item',
253
+ label: 'Required 2',
254
+ value: 'required2',
255
+ icon: 'archive-box-x-mark',
256
+ },
257
+ children: [
258
+ {
259
+ type: 'input',
260
+ props: {
261
+ subtype: 'toggle',
262
+ label: 'Required',
263
+ bind: 'required',
264
+ options: {
265
+ description: 'this field is required',
266
+ },
267
+ },
268
+ },
269
+ ],
270
+ },
271
+ ],
272
+ },
273
+ {
274
+ type: 'input',
275
+ props: {
276
+ subtype: 'tri-toggle',
277
+ label: 'Tri-toggle',
278
+ bind: 'tri-toggle-bind',
279
+ options: {
280
+ description: 'this field is never required',
281
+ },
282
+ },
283
+ },
284
+ {
285
+ type: 'input',
286
+ props: {
287
+ subtype: 'datepicker',
288
+ label: 'Date picker',
289
+ bind: 'datepicker',
290
+ options: {
291
+ description: 'this field is required',
292
+ },
293
+ },
294
+ },
295
+ ],
296
+ },
297
+ {
298
+ type: 'category',
299
+ props: {
300
+ label: 'Category 2nd',
301
+ },
302
+ children: [
303
+ {
304
+ type: 'input',
305
+ props: {
306
+ subtype: 'simple',
307
+ label: 'Email',
308
+ bind: 'email',
309
+ options: {
310
+ error: 'This field is required',
311
+ description: 'This field is required',
312
+ },
313
+ },
314
+ },
315
+ {
316
+ type: 'input',
317
+ props: {
318
+ subtype: 'radiogroup',
319
+ label: 'Radio Group',
320
+ bind: 'radiogroup',
321
+ options: {
322
+ description: 'This field is required',
323
+ error: 'This field is required',
324
+ },
325
+ },
326
+ children: [
327
+ {
328
+ type: 'item',
329
+ props: {
330
+ label: 'Checkbox',
331
+ bind: 'checkbox',
332
+ options: {
333
+ description: 'This field is required',
334
+ error: 'This field is required',
335
+ },
336
+ },
337
+ },
338
+ {
339
+ type: 'item',
340
+ props: {
341
+ label: 'Mote',
342
+ bind: 'mote',
343
+ options: {
344
+ description: 'This field is required',
345
+ error: 'This field is required',
346
+ },
347
+ },
348
+ },
349
+ ],
350
+ },
351
+ ],
352
+ },
353
+ {
354
+ type: 'category',
355
+ props: {
356
+ label: 'Category 3rd',
357
+ },
358
+ children: [
359
+ {
360
+ type: 'input',
361
+ props: {
362
+ subtype: 'file',
363
+ label: 'File',
364
+ bind: 'file',
365
+ options: {
366
+ error: 'This field is required',
367
+ description: 'This field is required',
368
+ },
369
+ },
370
+ },
371
+ ],
372
+ },
373
+ {
374
+ type: 'category',
375
+ props: {
376
+ label: 'Category 4th',
377
+ },
378
+ children: [
379
+ {
380
+ type: 'input',
381
+ props: {
382
+ subtype: 'textarea',
383
+ label: 'Textarea',
384
+ bind: 'textarea',
385
+ options: {
386
+ description: 'This field is required',
387
+ error: 'This field is required',
388
+ },
389
+ },
390
+ },
391
+ {
392
+ type: 'input',
393
+ props: {
394
+ subtype: 'checkbox',
395
+ label: 'Checkbox',
396
+ bind: 'checkbox',
397
+ options: {
398
+ description: 'This field is required',
399
+ error: 'This field is required',
400
+ },
401
+ },
402
+ },
403
+ ],
404
+ },
405
+ {
406
+ type: 'input',
407
+ props: {
408
+ subtype: 'submit',
409
+ label: 'Submit',
410
+ },
411
+ },
412
+ ] as React.ComponentProps<typeof Form>['config'];
413
+
414
+ const options = {
415
+ defaultValues: {
416
+ 'tri-toggle-bind': null,
417
+ required: true,
418
+ email: 'This should work',
419
+ radiogroup: 'mote',
420
+ checkbox: true,
421
+ textarea: 'This is a textarea',
422
+ },
423
+ variant: 'outline',
424
+ resetOnSubmit: true,
425
+ } as ComponentProps<typeof Form>['options'];
426
+
427
+ // the key properties for the defaultValues object are the same as the bind properties
428
+ const form = document.querySelector('twintag-form');
429
+
430
+ form?.setAttribute('config', JSON.stringify(config));
431
+ form?.setAttribute('options', JSON.stringify(options));
432
+
433
+ form?.addEventListener('twintag-form-values', (event) => {
434
+ console.log('form values', (event as CustomEvent).detail);
435
+ });
436
+ form?.addEventListener('twintag-form-valid', (e) => {
437
+ console.log('form valid', (e as CustomEvent).detail);
438
+ });
439
+ form?.addEventListener('twintag-form-invalid', (e) => {
440
+ console.log('form invalid', (e as CustomEvent).detail);
441
+ });
442
+
443
+ const getValues = document.getElementById('get-values');
444
+ getValues?.addEventListener('click', () => {
445
+ form?.shadowRoot
446
+ ?.querySelector('form')
447
+ ?.dispatchEvent(new CustomEvent('twintag-form-get_values'));
448
+ });
449
+
450
+ const submit = document.getElementById('submit');
451
+ submit?.addEventListener('click', () => {
452
+ form?.shadowRoot
453
+ ?.querySelector('form')
454
+ ?.dispatchEvent(new CustomEvent('twintag-form-validate'));
455
+ });
456
+
457
+ const setConfig = document.getElementById('set-config');
458
+ setConfig?.addEventListener('click', () => {
459
+ form?.setAttribute('config', JSON.stringify(config2));
460
+ });