@twintag/twintag-form 1.4.0-beta.1 → 1.4.0-beta.3

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