@woodylab/payload 0.0.119 → 0.0.121

package/dist/config/fieldCss.js

@@ -1,28 +1,5 @@
-import { fieldMargins } from './fields/fieldMargins';
-import { fieldPaddings } from './fields/fieldPaddings';
-import { fieldWidth } from './fields/fieldWidth';
-import { fieldHeight } from './fields/fieldHeight';
-import { fieldMinWidth } from './fields/fieldMinWidth';
-import { fieldMaxWidth } from './fields/fieldMaxWidth';
-import { fieldMinHeight } from './fields/fieldMinHeight';
-import { fieldMaxHeight } from './fields/fieldMaxHeight';
-import { fieldAspectRatio } from './fields/fieldAspectRatio';
-import { fieldOverflow } from './fields/fieldOverflow';
-import { fieldDisplay } from './fields/fieldDisplay';
-import { fieldPosition } from './fields/fieldPosition';
-import { fieldZIndex } from './fields/fieldZIndex';
-import { fieldIsolation } from './fields/fieldIsolation';
-import { fieldFlexDirection } from './fields/fieldFlexDirection';
-import { fieldFlexWrap } from './fields/fieldFlexWrap';
-import { fieldJustifyContent } from './fields/fieldJustifyContent';
-import { fieldAlignItems } from './fields/fieldAlignItems';
-import { fieldAlignContent } from './fields/fieldAlignContent';
-import { fieldFlexGap } from './fields/fieldFlexGap';
-import { fieldFlexGrow } from './fields/fieldFlexGrow';
-import { fieldFlexShrink } from './fields/fieldFlexShrink';
-import { fieldFlexBasis } from './fields/fieldFlexBasis';
-import { fieldOrder } from './fields/fieldOrder';
-const pureSelectors = ['display', 'position', 'isolation', 'flexDirection', 'flexWrap'];
+import { tailwindField } from './fields/tailwindField';
+import { tailwindSelectorVariants } from './fields/tailwindSelectorVariants';
 // #TODO cambiare gestione recupero valore campi se pureSelectors o meno D: MALEDIZIONE!!!
 //#TODO aggiungere elenco campi e relativi valori per permettere recupero e binding dopo recupero valori form.
 export const concatCssFields = (args) => {
@@ -38,11 +15,7 @@ export const concatCssFields = (args) => {
             return;
         if (typeof val === 'string' && val.trim() === '')
             return;
-        if (pureSelectors.includes(key)) {
-            classes.push(val);
-            return;
-        }
-        classes.push(`${key}-${val}`);
+        classes.push(val);
     });
     return classes.join(' ');
 };
@@ -68,61 +41,468 @@ export const fieldCss = () => {
                         label: 'Box',
                         fields: [
                             {
-                                type: 'row',
-                                fields: [
-                                    fieldMargins,
-                                    fieldPaddings,
-                                    fieldWidth,
-                                    fieldMinWidth,
-                                    fieldMaxWidth,
-                                    fieldHeight,
-                                    fieldMinHeight,
-                                    fieldMaxHeight,
-                                    fieldAspectRatio,
-                                ],
+                                type: 'tabs',
+                                tabs: tailwindSelectorVariants.map((bp) => {
+                                    return {
+                                        label: bp.label,
+                                        fields: [
+                                            {
+                                                type: 'row',
+                                                fields: [
+                                                    tailwindField('width', bp.value),
+                                                    tailwindField('minWidth', bp.value),
+                                                    tailwindField('maxWidth', bp.value),
+                                                    tailwindField('height', bp.value),
+                                                    tailwindField('minHeight', bp.value),
+                                                    tailwindField('maxHeight', bp.value),
+                                                    tailwindField('aspectRatio', bp.value),
+                                                    {
+                                                        type: 'collapsible',
+                                                        label: 'Margins',
+                                                        admin: {
+                                                            width: '50%',
+                                                        },
+                                                        fields: [
+                                                            tailwindField('margin', bp.value),
+                                                            tailwindField('marginX', bp.value),
+                                                            tailwindField('marginY', bp.value),
+                                                            tailwindField('marginTop', bp.value),
+                                                            tailwindField('marginEnd', bp.value),
+                                                            tailwindField('marginBottom', bp.value),
+                                                            tailwindField('marginStart', bp.value),
+                                                        ],
+                                                    },
+                                                    {
+                                                        type: 'collapsible',
+                                                        label: 'Paddings',
+                                                        admin: {
+                                                            width: '50%',
+                                                        },
+                                                        fields: [
+                                                            tailwindField('padding', bp.value),
+                                                            tailwindField('paddingX', bp.value),
+                                                            tailwindField('paddingY', bp.value),
+                                                            tailwindField('paddingTop', bp.value),
+                                                            tailwindField('paddingEnd', bp.value),
+                                                            tailwindField('paddingBottom', bp.value),
+                                                            tailwindField('paddingStart', bp.value),
+                                                            // # TODO OK funzionalità in aggiunta dei tab
+                                                            // GESTIRE LAYOUT DECENTE UNA VOLTA PER TUTTI I BP
+                                                        ],
+                                                    },
+                                                ],
+                                            },
+                                        ],
+                                    };
+                                }),
                             },
                         ],
                     },
                     {
-                        label: 'Layout',
+                        label: 'Display',
                         fields: [
                             {
-                                type: 'row',
-                                fields: [fieldDisplay, fieldPosition, fieldZIndex, fieldOverflow, fieldIsolation],
+                                type: 'tabs',
+                                tabs: tailwindSelectorVariants.map((bp) => {
+                                    return {
+                                        label: bp.label,
+                                        fields: [
+                                            {
+                                                type: 'row',
+                                                fields: [
+                                                    // BASE DISPLAY
+                                                    tailwindField('display', bp.value),
+                                                    tailwindField('visibility', bp.value),
+                                                    tailwindField('isolation', bp.value),
+                                                    // FLOW / OVERFLOW
+                                                    tailwindField('overflow', bp.value),
+                                                    tailwindField('overflowX', bp.value),
+                                                    tailwindField('overflowY', bp.value),
+                                                    // FLOAT / CLEAR
+                                                    tailwindField('float', bp.value),
+                                                    tailwindField('clear', bp.value),
+                                                    // FLEX
+                                                    tailwindField('flexWrap', bp.value),
+                                                    tailwindField('justifyContent', bp.value),
+                                                    tailwindField('alignItems', bp.value),
+                                                    tailwindField('alignContent', bp.value),
+                                                    tailwindField('alignSelf', bp.value),
+                                                    tailwindField('flexGrow', bp.value),
+                                                    tailwindField('flexShrink', bp.value),
+                                                    tailwindField('flexBasis', bp.value),
+                                                    tailwindField('order', bp.value),
+                                                    tailwindField('gap', bp.value),
+                                                    //tailwindField('rowGap', bp.value),
+                                                    tailwindField('columnGap', bp.value),
+                                                    // GRID
+                                                    tailwindField('gridTemplateColumns', bp.value),
+                                                    tailwindField('gridTemplateRows', bp.value),
+                                                    tailwindField('gridColumn', bp.value),
+                                                    tailwindField('gridRow', bp.value),
+                                                    tailwindField('gridAutoFlow', bp.value),
+                                                    tailwindField('gridAutoColumns', bp.value),
+                                                    tailwindField('gridAutoRows', bp.value),
+                                                    tailwindField('justifyItems', bp.value),
+                                                    tailwindField('justifySelf', bp.value),
+                                                    tailwindField('placeItems', bp.value),
+                                                    tailwindField('placeContent', bp.value),
+                                                    // TABLE
+                                                    tailwindField('tableLayout', bp.value),
+                                                    tailwindField('captionSide', bp.value),
+                                                    // OBJECT / MEDIA
+                                                    tailwindField('objectFit', bp.value),
+                                                    tailwindField('objectPosition', bp.value),
+                                                    // COLUMNS
+                                                    tailwindField('columns', bp.value),
+                                                    tailwindField('breakBefore', bp.value),
+                                                    tailwindField('breakAfter', bp.value),
+                                                    tailwindField('breakInside', bp.value),
+                                                ],
+                                            },
+                                        ],
+                                    };
+                                }),
                             },
                         ],
                     },
                     {
-                        label: 'Flex',
+                        label: 'Position',
                         fields: [
                             {
-                                type: 'row',
-                                fields: [
-                                    fieldFlexDirection,
-                                    fieldFlexWrap,
-                                    fieldJustifyContent,
-                                    fieldAlignItems,
-                                    fieldAlignContent,
-                                    fieldFlexGap,
-                                    fieldFlexGrow,
-                                    fieldFlexShrink,
-                                    fieldFlexBasis,
-                                    fieldOrder,
-                                ],
+                                type: 'tabs',
+                                tabs: tailwindSelectorVariants.map((bp) => {
+                                    return {
+                                        label: bp.label,
+                                        fields: [
+                                            {
+                                                type: 'row',
+                                                fields: [
+                                                    tailwindField('position', bp.value),
+                                                    // inset / offsets
+                                                    // #TODO Aggiungere ipotetico campo tailwindNumeric per selezione valore numerico tipo gli offset delle position
+                                                    //tailwindField('top', bp.value),
+                                                    //tailwindField('right', bp.value),
+                                                    //tailwindField('bottom', bp.value),
+                                                    //tailwindField('left', bp.value),
+                                                    //tailwindField('inset', bp.value),
+                                                    //tailwindField('insetX', bp.value),
+                                                    //tailwindField('insetY', bp.value),
+                                                    // z-index / stacking
+                                                    tailwindField('zIndex', bp.value),
+                                                    // translate (layout-related movement)
+                                                    //tailwindField('translateX', bp.value),
+                                                    //tailwindField('translateY', bp.value),
+                                                ],
+                                            },
+                                        ],
+                                    };
+                                }),
                             },
                         ],
                     },
                     {
-                        label: 'Grid',
-                        fields: [],
+                        label: 'Typography',
+                        fields: [
+                            {
+                                type: 'tabs',
+                                tabs: tailwindSelectorVariants.map((bp) => {
+                                    return {
+                                        label: bp.label,
+                                        fields: [
+                                            {
+                                                type: 'row',
+                                                fields: [
+                                                    tailwindField('fontFamily', bp.value),
+                                                    tailwindField('fontSize', bp.value),
+                                                    tailwindField('fontWeight', bp.value),
+                                                    tailwindField('fontStyle', bp.value),
+                                                    // text layout
+                                                    tailwindField('lineHeight', bp.value),
+                                                    tailwindField('letterSpacing', bp.value),
+                                                    tailwindField('textAlign', bp.value),
+                                                    tailwindField('verticalAlign', bp.value),
+                                                    // text transform & decoration
+                                                    tailwindField('textTransform', bp.value),
+                                                    tailwindField('textDecoration', bp.value),
+                                                    tailwindField('textDecorationStyle', bp.value),
+                                                    tailwindField('textDecorationThickness', bp.value),
+                                                    tailwindField('textUnderlineOffset', bp.value),
+                                                    // text behavior
+                                                    tailwindField('textOverflow', bp.value),
+                                                    tailwindField('whiteSpace', bp.value),
+                                                    tailwindField('wordBreak', bp.value),
+                                                    tailwindField('hyphens', bp.value),
+                                                    // list
+                                                    tailwindField('listStyleType', bp.value),
+                                                    tailwindField('listStylePosition', bp.value),
+                                                ],
+                                            },
+                                        ],
+                                    };
+                                }),
+                            },
+                        ],
                     },
                     {
-                        label: 'Position',
-                        fields: [],
+                        label: 'Color',
+                        fields: [
+                            {
+                                type: 'tabs',
+                                tabs: tailwindSelectorVariants.map((bp) => {
+                                    return {
+                                        label: bp.label,
+                                        fields: [
+                                            {
+                                                type: 'row',
+                                                fields: [
+                                                    tailwindField('textColor', bp.value),
+                                                    //tailwindField('placeholderColor', bp.value),
+                                                    tailwindField('caretColor', bp.value),
+                                                    // background
+                                                    tailwindField('backgroundColor', bp.value),
+                                                    // border & divide
+                                                    tailwindField('borderColor', bp.value),
+                                                    tailwindField('divideColor', bp.value),
+                                                    // accents
+                                                    tailwindField('accentColor', bp.value),
+                                                ],
+                                            },
+                                        ],
+                                    };
+                                }),
+                            },
+                        ],
                     },
                     {
-                        label: 'Typography',
-                        fields: [],
+                        label: 'Background',
+                        fields: [
+                            {
+                                type: 'tabs',
+                                tabs: tailwindSelectorVariants.map((bp) => {
+                                    return {
+                                        label: bp.label,
+                                        fields: [
+                                            {
+                                                type: 'row',
+                                                fields: [
+                                                    // background image & gradients
+                                                    tailwindField('backgroundImage', bp.value),
+                                                    // #TODO gestire possibilità di caricare una immagine (capire quindi gestione url dell'immagine da referenziare)
+                                                    //tailwindField('backgroundGradientFrom', bp.value),
+                                                    //tailwindField('backgroundGradientVia', bp.value),
+                                                    //tailwindField('backgroundGradientTo', bp.value),
+                                                    // background behavior
+                                                    tailwindField('backgroundSize', bp.value),
+                                                    tailwindField('backgroundPosition', bp.value),
+                                                    tailwindField('backgroundRepeat', bp.value),
+                                                    tailwindField('backgroundAttachment', bp.value),
+                                                    // clipping & origin
+                                                    tailwindField('backgroundClip', bp.value),
+                                                    tailwindField('backgroundOrigin', bp.value),
+                                                ],
+                                            },
+                                        ],
+                                    };
+                                }),
+                            },
+                        ],
+                    },
+                    {
+                        label: 'Border',
+                        fields: [
+                            {
+                                type: 'tabs',
+                                tabs: tailwindSelectorVariants.map((bp) => {
+                                    return {
+                                        label: bp.label,
+                                        fields: [
+                                            {
+                                                type: 'row',
+                                                fields: [
+                                                    // border width
+                                                    tailwindField('borderWidth', bp.value),
+                                                    // #TODO ADD
+                                                    //tailwindField('borderWidthX', bp.value),
+                                                    //tailwindField('borderWidthY', bp.value),
+                                                    //tailwindField('borderWidthTop', bp.value),
+                                                    //tailwindField('borderWidthRight', bp.value),
+                                                    //tailwindField('borderWidthBottom', bp.value),
+                                                    //tailwindField('borderWidthLeft', bp.value),
+                                                    // border style & radius
+                                                    tailwindField('borderStyle', bp.value),
+                                                    tailwindField('borderRadius', bp.value),
+                                                    // #TODO ADD
+                                                    //tailwindField('borderRadiusTop', bp.value),
+                                                    //tailwindField('borderRadiusRight', bp.value),
+                                                    //tailwindField('borderRadiusBottom', bp.value),
+                                                    //tailwindField('borderRadiusLeft', bp.value),
+                                                    // divide
+                                                    tailwindField('divideWidth', bp.value),
+                                                    tailwindField('divideStyle', bp.value),
+                                                    // outline & ring
+                                                    tailwindField('outline', bp.value),
+                                                    tailwindField('outlineOffset', bp.value),
+                                                    tailwindField('ringWidth', bp.value),
+                                                    tailwindField('ringOffsetWidth', bp.value),
+                                                ],
+                                            },
+                                        ],
+                                    };
+                                }),
+                            },
+                        ],
+                    },
+                    {
+                        label: 'Shadow',
+                        fields: [
+                            {
+                                type: 'tabs',
+                                tabs: tailwindSelectorVariants.map((bp) => {
+                                    return {
+                                        label: bp.label,
+                                        fields: [
+                                            {
+                                                type: 'row',
+                                                fields: [
+                                                    tailwindField('boxShadow', bp.value),
+                                                    //tailwindField('dropShadow', bp.value),
+                                                ],
+                                            },
+                                        ],
+                                    };
+                                }),
+                            },
+                        ],
+                    },
+                    {
+                        label: 'Effects',
+                        fields: [
+                            {
+                                type: 'tabs',
+                                tabs: tailwindSelectorVariants.map((bp) => {
+                                    return {
+                                        label: bp.label,
+                                        fields: [
+                                            {
+                                                type: 'row',
+                                                fields: [
+                                                    // opacity & blending
+                                                    tailwindField('opacity', bp.value),
+                                                    tailwindField('mixBlendMode', bp.value),
+                                                    //tailwindField('backgroundBlendMode', bp.value),
+                                                    // filters
+                                                    //tailwindField('blur', bp.value),
+                                                    //tailwindField('brightness', bp.value),
+                                                    //tailwindField('contrast', bp.value),
+                                                    //tailwindField('grayscale', bp.value),
+                                                    //tailwindField('hueRotate', bp.value),
+                                                    //tailwindField('invert', bp.value),
+                                                    //tailwindField('saturate', bp.value),
+                                                    //tailwindField('sepia', bp.value),
+                                                    // backdrop filters
+                                                    tailwindField('backdropBlur', bp.value),
+                                                    tailwindField('backdropBrightness', bp.value),
+                                                    tailwindField('backdropContrast', bp.value),
+                                                    tailwindField('backdropGrayscale', bp.value),
+                                                    tailwindField('backdropHueRotate', bp.value),
+                                                    tailwindField('backdropInvert', bp.value),
+                                                    tailwindField('backdropOpacity', bp.value),
+                                                    tailwindField('backdropSaturate', bp.value),
+                                                    tailwindField('backdropSepia', bp.value),
+                                                ],
+                                            },
+                                        ],
+                                    };
+                                }),
+                            },
+                        ],
+                    },
+                    {
+                        label: 'Transform',
+                        fields: [
+                            {
+                                type: 'tabs',
+                                tabs: tailwindSelectorVariants.map((bp) => {
+                                    return {
+                                        label: bp.label,
+                                        fields: [
+                                            {
+                                                type: 'row',
+                                                fields: [
+                                                    tailwindField('scale', bp.value),
+                                                    // #TODO ADD
+                                                    //tailwindField('scaleX', bp.value),
+                                                    //tailwindField('scaleY', bp.value),
+                                                    tailwindField('rotate', bp.value),
+                                                    //tailwindField('translateX', bp.value),
+                                                    //tailwindField('translateY', bp.value),
+                                                    //tailwindField('skewX', bp.value),
+                                                    //tailwindField('skewY', bp.value),
+                                                    tailwindField('transformOrigin', bp.value),
+                                                ],
+                                            },
+                                        ],
+                                    };
+                                }),
+                            },
+                        ],
+                    },
+                    {
+                        label: 'Animation',
+                        fields: [
+                            {
+                                type: 'tabs',
+                                tabs: tailwindSelectorVariants.map((bp) => {
+                                    return {
+                                        label: bp.label,
+                                        fields: [
+                                            {
+                                                type: 'row',
+                                                fields: [
+                                                    // transition
+                                                    tailwindField('transitionProperty', bp.value),
+                                                    tailwindField('transitionDuration', bp.value),
+                                                    tailwindField('transitionTimingFunction', bp.value),
+                                                    tailwindField('transitionDelay', bp.value),
+                                                    // animation
+                                                    tailwindField('animation', bp.value),
+                                                ],
+                                            },
+                                        ],
+                                    };
+                                }),
+                            },
+                        ],
+                    },
+                    {
+                        label: 'Interaction',
+                        fields: [
+                            {
+                                type: 'tabs',
+                                tabs: tailwindSelectorVariants.map((bp) => {
+                                    return {
+                                        label: bp.label,
+                                        fields: [
+                                            {
+                                                type: 'row',
+                                                fields: [
+                                                    tailwindField('cursor', bp.value),
+                                                    tailwindField('pointerEvents', bp.value),
+                                                    tailwindField('userSelect', bp.value),
+                                                    tailwindField('resize', bp.value),
+                                                    tailwindField('scrollBehavior', bp.value),
+                                                    tailwindField('scrollMargin', bp.value),
+                                                    tailwindField('scrollPadding', bp.value),
+                                                    tailwindField('scrollSnapType', bp.value),
+                                                    tailwindField('scrollSnapAlign', bp.value),
+                                                    tailwindField('scrollSnapStop', bp.value),
+                                                ],
+                                            },
+                                        ],
+                                    };
+                                }),
+                            },
+                        ],
                     },
                 ],
             },

package/dist/config/fields/tailwindField.d.ts

@@ -0,0 +1,3 @@
+import type { SelectField } from 'payload';
+import { tailwindFieldsSelectors } from './tailwindFieldSelectors';
+export declare const tailwindField: <T extends keyof typeof tailwindFieldsSelectors>(fieldName: T, breakPoint?: string, overrides?: Partial<SelectField>) => SelectField;

package/dist/config/fields/tailwindField.js

@@ -0,0 +1,26 @@
+import { tailwindFieldsSelectors } from './tailwindFieldSelectors';
+import { getValueFromClassNameString } from '../utils/getValueFromClassNameField';
+export const tailwindField = (fieldName, breakPoint = '', overrides = {}) => {
+    // @ts-ignore
+    const values = tailwindFieldsSelectors[fieldName];
+    if (!values) {
+        throw new Error(`Tailwind property "${String(fieldName)}" not found`);
+    }
+    return {
+        name: breakPoint + fieldName,
+        type: 'select',
+        options: values.map((value) => ({
+            label: value,
+            value: `${breakPoint}${value}`,
+        })),
+        virtual: true,
+        admin: {
+            width: '25%',
+        },
+        required: false,
+        hooks: {
+            afterRead: [getValueFromClassNameString],
+        },
+        ...overrides,
+    };
+};