@woodylab/payload 0.0.130 → 0.0.131

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/config/fieldCss.js +503 -502
  2. package/dist/config/index.cjs.js +1 -1
  3. package/dist/config/index.cjs.js.map +1 -1
  4. package/dist/config/index.esm.js +1 -1
  5. package/dist/config/index.esm.js.map +1 -1
  6. package/package.json +1 -1
package/dist/config/fieldCss.js CHANGED
@@ -32,512 +32,513 @@ export const fieldCss = (enableTabs = false) => {
32
32
  beforeValidate: [concatCssFields],
33
33
  },
34
34
  },
35
+ /*
35
36
  {
36
- type: 'tabs',
37
- tabs: [],
38
- /*enableTabs
39
- ? [
40
- {
41
- label: 'Box',
42
- fields: [
43
- {
44
- type: 'tabs',
45
- tabs: tailwindSelectorVariants.map((bp) => {
46
- return {
47
- label: bp.label,
48
- fields: [
49
- {
50
- type: 'row',
51
- fields: [
52
- tailwindField('width', bp.value),
53
- tailwindField('minWidth', bp.value),
54
- tailwindField('maxWidth', bp.value),
55
- tailwindField('height', bp.value),
56
- tailwindField('minHeight', bp.value),
57
- tailwindField('maxHeight', bp.value),
58
- tailwindField('aspectRatio', bp.value),
59
- {
60
- type: 'collapsible',
61
- label: 'Margins',
62
- admin: {
63
- width: '50%',
64
- },
65
- fields: [
66
- tailwindField('margin', bp.value),
67
- tailwindField('marginX', bp.value),
68
- tailwindField('marginY', bp.value),
69
- tailwindField('marginTop', bp.value),
70
- tailwindField('marginEnd', bp.value),
71
- tailwindField('marginBottom', bp.value),
72
- tailwindField('marginStart', bp.value),
73
- ],
37
+ type: 'tabs',
38
+ tabs: [],
39
+ enableTabs
40
+ ? [
41
+ {
42
+ label: 'Box',
43
+ fields: [
44
+ {
45
+ type: 'tabs',
46
+ tabs: tailwindSelectorVariants.map((bp) => {
47
+ return {
48
+ label: bp.label,
49
+ fields: [
50
+ {
51
+ type: 'row',
52
+ fields: [
53
+ tailwindField('width', bp.value),
54
+ tailwindField('minWidth', bp.value),
55
+ tailwindField('maxWidth', bp.value),
56
+ tailwindField('height', bp.value),
57
+ tailwindField('minHeight', bp.value),
58
+ tailwindField('maxHeight', bp.value),
59
+ tailwindField('aspectRatio', bp.value),
60
+ {
61
+ type: 'collapsible',
62
+ label: 'Margins',
63
+ admin: {
64
+ width: '50%',
74
65
  },
75
- {
76
- type: 'collapsible',
77
- label: 'Paddings',
78
- admin: {
79
- width: '50%',
80
- },
81
- fields: [
82
- tailwindField('padding', bp.value),
83
- tailwindField('paddingX', bp.value),
84
- tailwindField('paddingY', bp.value),
85
- tailwindField('paddingTop', bp.value),
86
- tailwindField('paddingEnd', bp.value),
87
- tailwindField('paddingBottom', bp.value),
88
- tailwindField('paddingStart', bp.value),
89
- // # TODO OK funzionalità in aggiunta dei tab
90
- // GESTIRE LAYOUT DECENTE UNA VOLTA PER TUTTI I BP
91
- ],
66
+ fields: [
67
+ tailwindField('margin', bp.value),
68
+ tailwindField('marginX', bp.value),
69
+ tailwindField('marginY', bp.value),
70
+ tailwindField('marginTop', bp.value),
71
+ tailwindField('marginEnd', bp.value),
72
+ tailwindField('marginBottom', bp.value),
73
+ tailwindField('marginStart', bp.value),
74
+ ],
75
+ },
76
+ {
77
+ type: 'collapsible',
78
+ label: 'Paddings',
79
+ admin: {
80
+ width: '50%',
92
81
  },
93
- ],
94
- },
95
- ],
96
- }
97
- }),
98
- },
99
- ],
100
- },
101
- {
102
- label: 'Display',
103
- fields: [
104
- {
105
- type: 'tabs',
106
- tabs: tailwindSelectorVariants.map((bp) => {
107
- return {
108
- label: bp.label,
109
- fields: [
110
- {
111
- type: 'row',
112
- fields: [
113
- // BASE DISPLAY
114
- tailwindField('display', bp.value),
115
- tailwindField('visibility', bp.value),
116
- tailwindField('isolation', bp.value),
117
-
118
- // FLOW / OVERFLOW
119
- tailwindField('overflow', bp.value),
120
- tailwindField('overflowX', bp.value),
121
- tailwindField('overflowY', bp.value),
122
-
123
- // FLOAT / CLEAR
124
- tailwindField('float', bp.value),
125
- tailwindField('clear', bp.value),
126
-
127
- // FLEX
128
- tailwindField('flexWrap', bp.value),
129
- tailwindField('justifyContent', bp.value),
130
- tailwindField('alignItems', bp.value),
131
- tailwindField('alignContent', bp.value),
132
- tailwindField('alignSelf', bp.value),
133
- tailwindField('flexGrow', bp.value),
134
- tailwindField('flexShrink', bp.value),
135
- tailwindField('flexBasis', bp.value),
136
- tailwindField('order', bp.value),
137
- tailwindField('gap', bp.value),
138
- //tailwindField('rowGap', bp.value),
139
- tailwindField('columnGap', bp.value),
140
-
141
- // GRID
142
- tailwindField('gridTemplateColumns', bp.value),
143
- tailwindField('gridTemplateRows', bp.value),
144
- tailwindField('gridColumn', bp.value),
145
- tailwindField('gridRow', bp.value),
146
- tailwindField('gridAutoFlow', bp.value),
147
- tailwindField('gridAutoColumns', bp.value),
148
- tailwindField('gridAutoRows', bp.value),
149
- tailwindField('justifyItems', bp.value),
150
- tailwindField('justifySelf', bp.value),
151
- tailwindField('placeItems', bp.value),
152
- tailwindField('placeContent', bp.value),
153
-
154
- // TABLE
155
- tailwindField('tableLayout', bp.value),
156
- tailwindField('captionSide', bp.value),
157
-
158
- // OBJECT / MEDIA
159
- tailwindField('objectFit', bp.value),
160
- tailwindField('objectPosition', bp.value),
161
-
162
- // COLUMNS
163
- tailwindField('columns', bp.value),
164
- tailwindField('breakBefore', bp.value),
165
- tailwindField('breakAfter', bp.value),
166
- tailwindField('breakInside', bp.value),
167
- ],
168
- },
169
- ],
170
- }
171
- }),
172
- },
173
- ],
174
- },
175
- {
176
- label: 'Position',
177
- fields: [
178
- {
179
- type: 'tabs',
180
- tabs: tailwindSelectorVariants.map((bp) => {
181
- return {
182
- label: bp.label,
183
- fields: [
184
- {
185
- type: 'row',
186
- fields: [
187
- tailwindField('position', bp.value),
188
- // inset / offsets
189
- // #TODO Aggiungere ipotetico campo tailwindNumeric per selezione valore numerico tipo gli offset delle position
190
- //tailwindField('top', bp.value),
191
- //tailwindField('right', bp.value),
192
- //tailwindField('bottom', bp.value),
193
- //tailwindField('left', bp.value),
194
- //tailwindField('inset', bp.value),
195
- //tailwindField('insetX', bp.value),
196
- //tailwindField('insetY', bp.value),
197
-
198
- // z-index / stacking
199
- tailwindField('zIndex', bp.value),
200
-
201
- // translate (layout-related movement)
202
- //tailwindField('translateX', bp.value),
203
- //tailwindField('translateY', bp.value),
204
- ],
205
- },
206
- ],
207
- }
208
- }),
209
- },
210
- ],
211
- },
212
- {
213
- label: 'Typography',
214
- fields: [
215
- {
216
- type: 'tabs',
217
- tabs: tailwindSelectorVariants.map((bp) => {
218
- return {
219
- label: bp.label,
220
- fields: [
221
- {
222
- type: 'row',
223
- fields: [
224
- tailwindField('fontFamily', bp.value),
225
- tailwindField('fontSize', bp.value),
226
- tailwindField('fontWeight', bp.value),
227
- tailwindField('fontStyle', bp.value),
228
-
229
- // text layout
230
- tailwindField('lineHeight', bp.value),
231
- tailwindField('letterSpacing', bp.value),
232
- tailwindField('textAlign', bp.value),
233
- tailwindField('verticalAlign', bp.value),
234
-
235
- // text transform & decoration
236
- tailwindField('textTransform', bp.value),
237
- tailwindField('textDecoration', bp.value),
238
- tailwindField('textDecorationStyle', bp.value),
239
- tailwindField('textDecorationThickness', bp.value),
240
- tailwindField('textUnderlineOffset', bp.value),
241
-
242
- // text behavior
243
- tailwindField('textOverflow', bp.value),
244
- tailwindField('whiteSpace', bp.value),
245
- tailwindField('wordBreak', bp.value),
246
- tailwindField('hyphens', bp.value),
247
-
248
- // list
249
- tailwindField('listStyleType', bp.value),
250
- tailwindField('listStylePosition', bp.value),
251
- ],
252
- },
253
- ],
254
- }
255
- }),
256
- },
257
- ],
258
- },
259
- {
260
- label: 'Color',
261
- fields: [
262
- {
263
- type: 'tabs',
264
- tabs: tailwindSelectorVariants.map((bp) => {
265
- return {
266
- label: bp.label,
267
- fields: [
268
- {
269
- type: 'row',
270
- fields: [
271
- tailwindField('textColor', bp.value),
272
- //tailwindField('placeholderColor', bp.value),
273
- tailwindField('caretColor', bp.value),
274
-
275
- // background
276
- tailwindField('backgroundColor', bp.value),
277
-
278
- // border & divide
279
- tailwindField('borderColor', bp.value),
280
- tailwindField('divideColor', bp.value),
281
-
282
- // accents
283
- tailwindField('accentColor', bp.value),
284
- ],
285
- },
286
- ],
287
- }
288
- }),
289
- },
290
- ],
291
- },
292
- {
293
- label: 'Background',
294
- fields: [
295
- {
296
- type: 'tabs',
297
- tabs: tailwindSelectorVariants.map((bp) => {
298
- return {
299
- label: bp.label,
300
- fields: [
301
- {
302
- type: 'row',
303
- fields: [
304
- // background image & gradients
305
- tailwindField('backgroundImage', bp.value),
306
- // #TODO gestire possibilità di caricare una immagine (capire quindi gestione url dell'immagine da referenziare)
307
- //tailwindField('backgroundGradientFrom', bp.value),
308
- //tailwindField('backgroundGradientVia', bp.value),
309
- //tailwindField('backgroundGradientTo', bp.value),
310
-
311
- // background behavior
312
- tailwindField('backgroundSize', bp.value),
313
- tailwindField('backgroundPosition', bp.value),
314
- tailwindField('backgroundRepeat', bp.value),
315
- tailwindField('backgroundAttachment', bp.value),
316
-
317
- // clipping & origin
318
- tailwindField('backgroundClip', bp.value),
319
- tailwindField('backgroundOrigin', bp.value),
320
- ],
321
- },
322
- ],
323
- }
324
- }),
325
- },
326
- ],
327
- },
328
- {
329
- label: 'Border',
330
- fields: [
331
- {
332
- type: 'tabs',
333
- tabs: tailwindSelectorVariants.map((bp) => {
334
- return {
335
- label: bp.label,
336
- fields: [
337
- {
338
- type: 'row',
339
- fields: [
340
- // border width
341
- tailwindField('borderWidth', bp.value),
342
- // #TODO ADD
343
- //tailwindField('borderWidthX', bp.value),
344
- //tailwindField('borderWidthY', bp.value),
345
- //tailwindField('borderWidthTop', bp.value),
346
- //tailwindField('borderWidthRight', bp.value),
347
- //tailwindField('borderWidthBottom', bp.value),
348
- //tailwindField('borderWidthLeft', bp.value),
349
-
350
- // border style & radius
351
- tailwindField('borderStyle', bp.value),
352
- tailwindField('borderRadius', bp.value),
353
- // #TODO ADD
354
- //tailwindField('borderRadiusTop', bp.value),
355
- //tailwindField('borderRadiusRight', bp.value),
356
- //tailwindField('borderRadiusBottom', bp.value),
357
- //tailwindField('borderRadiusLeft', bp.value),
358
-
359
- // divide
360
- tailwindField('divideWidth', bp.value),
361
- tailwindField('divideStyle', bp.value),
362
-
363
- // outline & ring
364
- tailwindField('outline', bp.value),
365
- tailwindField('outlineOffset', bp.value),
366
- tailwindField('ringWidth', bp.value),
367
- tailwindField('ringOffsetWidth', bp.value),
368
- ],
369
- },
370
- ],
371
- }
372
- }),
373
- },
374
- ],
375
- },
376
- {
377
- label: 'Shadow',
378
- fields: [
379
- {
380
- type: 'tabs',
381
- tabs: tailwindSelectorVariants.map((bp) => {
382
- return {
383
- label: bp.label,
384
- fields: [
385
- {
386
- type: 'row',
387
- fields: [
388
- tailwindField('boxShadow', bp.value),
389
- //tailwindField('dropShadow', bp.value),
390
- ],
391
- },
392
- ],
393
- }
394
- }),
395
- },
396
- ],
397
- },
398
- {
399
- label: 'Effects',
400
- fields: [
401
- {
402
- type: 'tabs',
403
- tabs: tailwindSelectorVariants.map((bp) => {
404
- return {
405
- label: bp.label,
406
- fields: [
407
- {
408
- type: 'row',
409
- fields: [
410
- // opacity & blending
411
- tailwindField('opacity', bp.value),
412
- tailwindField('mixBlendMode', bp.value),
413
- //tailwindField('backgroundBlendMode', bp.value),
414
-
415
- // filters
416
- //tailwindField('blur', bp.value),
417
- //tailwindField('brightness', bp.value),
418
- //tailwindField('contrast', bp.value),
419
- //tailwindField('grayscale', bp.value),
420
- //tailwindField('hueRotate', bp.value),
421
- //tailwindField('invert', bp.value),
422
- //tailwindField('saturate', bp.value),
423
- //tailwindField('sepia', bp.value),
424
-
425
- // backdrop filters
426
- tailwindField('backdropBlur', bp.value),
427
- tailwindField('backdropBrightness', bp.value),
428
- tailwindField('backdropContrast', bp.value),
429
- tailwindField('backdropGrayscale', bp.value),
430
- tailwindField('backdropHueRotate', bp.value),
431
- tailwindField('backdropInvert', bp.value),
432
- tailwindField('backdropOpacity', bp.value),
433
- tailwindField('backdropSaturate', bp.value),
434
- tailwindField('backdropSepia', bp.value),
435
- ],
436
- },
437
- ],
438
- }
439
- }),
440
- },
441
- ],
442
- },
443
- {
444
- label: 'Transform',
445
- fields: [
446
- {
447
- type: 'tabs',
448
- tabs: tailwindSelectorVariants.map((bp) => {
449
- return {
450
- label: bp.label,
451
- fields: [
452
- {
453
- type: 'row',
454
- fields: [
455
- tailwindField('scale', bp.value),
456
- // #TODO ADD
457
- //tailwindField('scaleX', bp.value),
458
- //tailwindField('scaleY', bp.value),
459
-
460
- tailwindField('rotate', bp.value),
461
-
462
- //tailwindField('translateX', bp.value),
463
- //tailwindField('translateY', bp.value),
464
-
465
- //tailwindField('skewX', bp.value),
466
- //tailwindField('skewY', bp.value),
467
-
468
- tailwindField('transformOrigin', bp.value),
469
- ],
470
- },
471
- ],
472
- }
473
- }),
474
- },
475
- ],
476
- },
477
- {
478
- label: 'Animation',
479
- fields: [
480
- {
481
- type: 'tabs',
482
- tabs: tailwindSelectorVariants.map((bp) => {
483
- return {
484
- label: bp.label,
485
- fields: [
486
- {
487
- type: 'row',
488
- fields: [
489
- // transition
490
- tailwindField('transitionProperty', bp.value),
491
- tailwindField('transitionDuration', bp.value),
492
- tailwindField('transitionTimingFunction', bp.value),
493
- tailwindField('transitionDelay', bp.value),
494
-
495
- // animation
496
- tailwindField('animation', bp.value),
497
- ],
498
- },
499
- ],
500
- }
501
- }),
502
- },
503
- ],
504
- },
505
- {
506
- label: 'Interaction',
507
- fields: [
508
- {
509
- type: 'tabs',
510
- tabs: tailwindSelectorVariants.map((bp) => {
511
- return {
512
- label: bp.label,
513
- fields: [
514
- {
515
- type: 'row',
516
- fields: [
517
- tailwindField('cursor', bp.value),
518
- tailwindField('pointerEvents', bp.value),
519
- tailwindField('userSelect', bp.value),
520
-
521
- tailwindField('resize', bp.value),
522
-
523
- tailwindField('scrollBehavior', bp.value),
524
- tailwindField('scrollMargin', bp.value),
525
- tailwindField('scrollPadding', bp.value),
526
- tailwindField('scrollSnapType', bp.value),
527
- tailwindField('scrollSnapAlign', bp.value),
528
- tailwindField('scrollSnapStop', bp.value),
529
- ],
530
- },
531
- ],
532
- }
533
- }),
534
- },
535
- ],
536
- },
537
- ]
538
- : [],
539
- */
82
+ fields: [
83
+ tailwindField('padding', bp.value),
84
+ tailwindField('paddingX', bp.value),
85
+ tailwindField('paddingY', bp.value),
86
+ tailwindField('paddingTop', bp.value),
87
+ tailwindField('paddingEnd', bp.value),
88
+ tailwindField('paddingBottom', bp.value),
89
+ tailwindField('paddingStart', bp.value),
90
+ // # TODO OK funzionalità in aggiunta dei tab
91
+ // GESTIRE LAYOUT DECENTE UNA VOLTA PER TUTTI I BP
92
+ ],
93
+ },
94
+ ],
95
+ },
96
+ ],
97
+ }
98
+ }),
99
+ },
100
+ ],
101
+ },
102
+ {
103
+ label: 'Display',
104
+ fields: [
105
+ {
106
+ type: 'tabs',
107
+ tabs: tailwindSelectorVariants.map((bp) => {
108
+ return {
109
+ label: bp.label,
110
+ fields: [
111
+ {
112
+ type: 'row',
113
+ fields: [
114
+ // BASE DISPLAY
115
+ tailwindField('display', bp.value),
116
+ tailwindField('visibility', bp.value),
117
+ tailwindField('isolation', bp.value),
118
+
119
+ // FLOW / OVERFLOW
120
+ tailwindField('overflow', bp.value),
121
+ tailwindField('overflowX', bp.value),
122
+ tailwindField('overflowY', bp.value),
123
+
124
+ // FLOAT / CLEAR
125
+ tailwindField('float', bp.value),
126
+ tailwindField('clear', bp.value),
127
+
128
+ // FLEX
129
+ tailwindField('flexWrap', bp.value),
130
+ tailwindField('justifyContent', bp.value),
131
+ tailwindField('alignItems', bp.value),
132
+ tailwindField('alignContent', bp.value),
133
+ tailwindField('alignSelf', bp.value),
134
+ tailwindField('flexGrow', bp.value),
135
+ tailwindField('flexShrink', bp.value),
136
+ tailwindField('flexBasis', bp.value),
137
+ tailwindField('order', bp.value),
138
+ tailwindField('gap', bp.value),
139
+ //tailwindField('rowGap', bp.value),
140
+ tailwindField('columnGap', bp.value),
141
+
142
+ // GRID
143
+ tailwindField('gridTemplateColumns', bp.value),
144
+ tailwindField('gridTemplateRows', bp.value),
145
+ tailwindField('gridColumn', bp.value),
146
+ tailwindField('gridRow', bp.value),
147
+ tailwindField('gridAutoFlow', bp.value),
148
+ tailwindField('gridAutoColumns', bp.value),
149
+ tailwindField('gridAutoRows', bp.value),
150
+ tailwindField('justifyItems', bp.value),
151
+ tailwindField('justifySelf', bp.value),
152
+ tailwindField('placeItems', bp.value),
153
+ tailwindField('placeContent', bp.value),
154
+
155
+ // TABLE
156
+ tailwindField('tableLayout', bp.value),
157
+ tailwindField('captionSide', bp.value),
158
+
159
+ // OBJECT / MEDIA
160
+ tailwindField('objectFit', bp.value),
161
+ tailwindField('objectPosition', bp.value),
162
+
163
+ // COLUMNS
164
+ tailwindField('columns', bp.value),
165
+ tailwindField('breakBefore', bp.value),
166
+ tailwindField('breakAfter', bp.value),
167
+ tailwindField('breakInside', bp.value),
168
+ ],
169
+ },
170
+ ],
171
+ }
172
+ }),
173
+ },
174
+ ],
175
+ },
176
+ {
177
+ label: 'Position',
178
+ fields: [
179
+ {
180
+ type: 'tabs',
181
+ tabs: tailwindSelectorVariants.map((bp) => {
182
+ return {
183
+ label: bp.label,
184
+ fields: [
185
+ {
186
+ type: 'row',
187
+ fields: [
188
+ tailwindField('position', bp.value),
189
+ // inset / offsets
190
+ // #TODO Aggiungere ipotetico campo tailwindNumeric per selezione valore numerico tipo gli offset delle position
191
+ //tailwindField('top', bp.value),
192
+ //tailwindField('right', bp.value),
193
+ //tailwindField('bottom', bp.value),
194
+ //tailwindField('left', bp.value),
195
+ //tailwindField('inset', bp.value),
196
+ //tailwindField('insetX', bp.value),
197
+ //tailwindField('insetY', bp.value),
198
+
199
+ // z-index / stacking
200
+ tailwindField('zIndex', bp.value),
201
+
202
+ // translate (layout-related movement)
203
+ //tailwindField('translateX', bp.value),
204
+ //tailwindField('translateY', bp.value),
205
+ ],
206
+ },
207
+ ],
208
+ }
209
+ }),
210
+ },
211
+ ],
212
+ },
213
+ {
214
+ label: 'Typography',
215
+ fields: [
216
+ {
217
+ type: 'tabs',
218
+ tabs: tailwindSelectorVariants.map((bp) => {
219
+ return {
220
+ label: bp.label,
221
+ fields: [
222
+ {
223
+ type: 'row',
224
+ fields: [
225
+ tailwindField('fontFamily', bp.value),
226
+ tailwindField('fontSize', bp.value),
227
+ tailwindField('fontWeight', bp.value),
228
+ tailwindField('fontStyle', bp.value),
229
+
230
+ // text layout
231
+ tailwindField('lineHeight', bp.value),
232
+ tailwindField('letterSpacing', bp.value),
233
+ tailwindField('textAlign', bp.value),
234
+ tailwindField('verticalAlign', bp.value),
235
+
236
+ // text transform & decoration
237
+ tailwindField('textTransform', bp.value),
238
+ tailwindField('textDecoration', bp.value),
239
+ tailwindField('textDecorationStyle', bp.value),
240
+ tailwindField('textDecorationThickness', bp.value),
241
+ tailwindField('textUnderlineOffset', bp.value),
242
+
243
+ // text behavior
244
+ tailwindField('textOverflow', bp.value),
245
+ tailwindField('whiteSpace', bp.value),
246
+ tailwindField('wordBreak', bp.value),
247
+ tailwindField('hyphens', bp.value),
248
+
249
+ // list
250
+ tailwindField('listStyleType', bp.value),
251
+ tailwindField('listStylePosition', bp.value),
252
+ ],
253
+ },
254
+ ],
255
+ }
256
+ }),
257
+ },
258
+ ],
259
+ },
260
+ {
261
+ label: 'Color',
262
+ fields: [
263
+ {
264
+ type: 'tabs',
265
+ tabs: tailwindSelectorVariants.map((bp) => {
266
+ return {
267
+ label: bp.label,
268
+ fields: [
269
+ {
270
+ type: 'row',
271
+ fields: [
272
+ tailwindField('textColor', bp.value),
273
+ //tailwindField('placeholderColor', bp.value),
274
+ tailwindField('caretColor', bp.value),
275
+
276
+ // background
277
+ tailwindField('backgroundColor', bp.value),
278
+
279
+ // border & divide
280
+ tailwindField('borderColor', bp.value),
281
+ tailwindField('divideColor', bp.value),
282
+
283
+ // accents
284
+ tailwindField('accentColor', bp.value),
285
+ ],
286
+ },
287
+ ],
288
+ }
289
+ }),
290
+ },
291
+ ],
292
+ },
293
+ {
294
+ label: 'Background',
295
+ fields: [
296
+ {
297
+ type: 'tabs',
298
+ tabs: tailwindSelectorVariants.map((bp) => {
299
+ return {
300
+ label: bp.label,
301
+ fields: [
302
+ {
303
+ type: 'row',
304
+ fields: [
305
+ // background image & gradients
306
+ tailwindField('backgroundImage', bp.value),
307
+ // #TODO gestire possibilità di caricare una immagine (capire quindi gestione url dell'immagine da referenziare)
308
+ //tailwindField('backgroundGradientFrom', bp.value),
309
+ //tailwindField('backgroundGradientVia', bp.value),
310
+ //tailwindField('backgroundGradientTo', bp.value),
311
+
312
+ // background behavior
313
+ tailwindField('backgroundSize', bp.value),
314
+ tailwindField('backgroundPosition', bp.value),
315
+ tailwindField('backgroundRepeat', bp.value),
316
+ tailwindField('backgroundAttachment', bp.value),
317
+
318
+ // clipping & origin
319
+ tailwindField('backgroundClip', bp.value),
320
+ tailwindField('backgroundOrigin', bp.value),
321
+ ],
322
+ },
323
+ ],
324
+ }
325
+ }),
326
+ },
327
+ ],
328
+ },
329
+ {
330
+ label: 'Border',
331
+ fields: [
332
+ {
333
+ type: 'tabs',
334
+ tabs: tailwindSelectorVariants.map((bp) => {
335
+ return {
336
+ label: bp.label,
337
+ fields: [
338
+ {
339
+ type: 'row',
340
+ fields: [
341
+ // border width
342
+ tailwindField('borderWidth', bp.value),
343
+ // #TODO ADD
344
+ //tailwindField('borderWidthX', bp.value),
345
+ //tailwindField('borderWidthY', bp.value),
346
+ //tailwindField('borderWidthTop', bp.value),
347
+ //tailwindField('borderWidthRight', bp.value),
348
+ //tailwindField('borderWidthBottom', bp.value),
349
+ //tailwindField('borderWidthLeft', bp.value),
350
+
351
+ // border style & radius
352
+ tailwindField('borderStyle', bp.value),
353
+ tailwindField('borderRadius', bp.value),
354
+ // #TODO ADD
355
+ //tailwindField('borderRadiusTop', bp.value),
356
+ //tailwindField('borderRadiusRight', bp.value),
357
+ //tailwindField('borderRadiusBottom', bp.value),
358
+ //tailwindField('borderRadiusLeft', bp.value),
359
+
360
+ // divide
361
+ tailwindField('divideWidth', bp.value),
362
+ tailwindField('divideStyle', bp.value),
363
+
364
+ // outline & ring
365
+ tailwindField('outline', bp.value),
366
+ tailwindField('outlineOffset', bp.value),
367
+ tailwindField('ringWidth', bp.value),
368
+ tailwindField('ringOffsetWidth', bp.value),
369
+ ],
370
+ },
371
+ ],
372
+ }
373
+ }),
374
+ },
375
+ ],
376
+ },
377
+ {
378
+ label: 'Shadow',
379
+ fields: [
380
+ {
381
+ type: 'tabs',
382
+ tabs: tailwindSelectorVariants.map((bp) => {
383
+ return {
384
+ label: bp.label,
385
+ fields: [
386
+ {
387
+ type: 'row',
388
+ fields: [
389
+ tailwindField('boxShadow', bp.value),
390
+ //tailwindField('dropShadow', bp.value),
391
+ ],
392
+ },
393
+ ],
394
+ }
395
+ }),
396
+ },
397
+ ],
398
+ },
399
+ {
400
+ label: 'Effects',
401
+ fields: [
402
+ {
403
+ type: 'tabs',
404
+ tabs: tailwindSelectorVariants.map((bp) => {
405
+ return {
406
+ label: bp.label,
407
+ fields: [
408
+ {
409
+ type: 'row',
410
+ fields: [
411
+ // opacity & blending
412
+ tailwindField('opacity', bp.value),
413
+ tailwindField('mixBlendMode', bp.value),
414
+ //tailwindField('backgroundBlendMode', bp.value),
415
+
416
+ // filters
417
+ //tailwindField('blur', bp.value),
418
+ //tailwindField('brightness', bp.value),
419
+ //tailwindField('contrast', bp.value),
420
+ //tailwindField('grayscale', bp.value),
421
+ //tailwindField('hueRotate', bp.value),
422
+ //tailwindField('invert', bp.value),
423
+ //tailwindField('saturate', bp.value),
424
+ //tailwindField('sepia', bp.value),
425
+
426
+ // backdrop filters
427
+ tailwindField('backdropBlur', bp.value),
428
+ tailwindField('backdropBrightness', bp.value),
429
+ tailwindField('backdropContrast', bp.value),
430
+ tailwindField('backdropGrayscale', bp.value),
431
+ tailwindField('backdropHueRotate', bp.value),
432
+ tailwindField('backdropInvert', bp.value),
433
+ tailwindField('backdropOpacity', bp.value),
434
+ tailwindField('backdropSaturate', bp.value),
435
+ tailwindField('backdropSepia', bp.value),
436
+ ],
437
+ },
438
+ ],
439
+ }
440
+ }),
441
+ },
442
+ ],
443
+ },
444
+ {
445
+ label: 'Transform',
446
+ fields: [
447
+ {
448
+ type: 'tabs',
449
+ tabs: tailwindSelectorVariants.map((bp) => {
450
+ return {
451
+ label: bp.label,
452
+ fields: [
453
+ {
454
+ type: 'row',
455
+ fields: [
456
+ tailwindField('scale', bp.value),
457
+ // #TODO ADD
458
+ //tailwindField('scaleX', bp.value),
459
+ //tailwindField('scaleY', bp.value),
460
+
461
+ tailwindField('rotate', bp.value),
462
+
463
+ //tailwindField('translateX', bp.value),
464
+ //tailwindField('translateY', bp.value),
465
+
466
+ //tailwindField('skewX', bp.value),
467
+ //tailwindField('skewY', bp.value),
468
+
469
+ tailwindField('transformOrigin', bp.value),
470
+ ],
471
+ },
472
+ ],
473
+ }
474
+ }),
475
+ },
476
+ ],
477
+ },
478
+ {
479
+ label: 'Animation',
480
+ fields: [
481
+ {
482
+ type: 'tabs',
483
+ tabs: tailwindSelectorVariants.map((bp) => {
484
+ return {
485
+ label: bp.label,
486
+ fields: [
487
+ {
488
+ type: 'row',
489
+ fields: [
490
+ // transition
491
+ tailwindField('transitionProperty', bp.value),
492
+ tailwindField('transitionDuration', bp.value),
493
+ tailwindField('transitionTimingFunction', bp.value),
494
+ tailwindField('transitionDelay', bp.value),
495
+
496
+ // animation
497
+ tailwindField('animation', bp.value),
498
+ ],
499
+ },
500
+ ],
501
+ }
502
+ }),
503
+ },
504
+ ],
505
+ },
506
+ {
507
+ label: 'Interaction',
508
+ fields: [
509
+ {
510
+ type: 'tabs',
511
+ tabs: tailwindSelectorVariants.map((bp) => {
512
+ return {
513
+ label: bp.label,
514
+ fields: [
515
+ {
516
+ type: 'row',
517
+ fields: [
518
+ tailwindField('cursor', bp.value),
519
+ tailwindField('pointerEvents', bp.value),
520
+ tailwindField('userSelect', bp.value),
521
+
522
+ tailwindField('resize', bp.value),
523
+
524
+ tailwindField('scrollBehavior', bp.value),
525
+ tailwindField('scrollMargin', bp.value),
526
+ tailwindField('scrollPadding', bp.value),
527
+ tailwindField('scrollSnapType', bp.value),
528
+ tailwindField('scrollSnapAlign', bp.value),
529
+ tailwindField('scrollSnapStop', bp.value),
530
+ ],
531
+ },
532
+ ],
533
+ }
534
+ }),
535
+ },
536
+ ],
537
+ },
538
+ ]
539
+ : [],
540
540
  },
541
+ */
541
542
  ],
542
543
  };
543
544
  };