@woodylab/payload 0.0.26 → 0.0.32

package/dist/{fieldSectionTabs-CmJ7R1Tc.js → fieldSectionTabs-Cd28NYFQ.js}

@@ -1,6 +1,7 @@
 'use strict';
 
 var tailwind_index = require('./index-DgYntBlB.js');
+var getNumberValueFromClassNameString = require('./getNumberValueFromClassNameString-D4OqkHPA.js');
 
 const fieldText = (override) => ({
     name: 'text',
@@ -133,262 +134,280 @@ const fieldHeights = () => {
     });
 };
 
-const concatMarginFields = (args) => {
-    const { value, siblingData, operation } = args;
-    if (operation === 'create' || operation === 'update') {
-        const margins = siblingData || {};
-        const { all, x, y, t, r, b, l } = margins;
-        const classes = [];
-        if (all)
-            classes.push(`m-${all}`);
-        if (x)
-            classes.push(`mx-${x}`);
-        if (y)
-            classes.push(`my-${y}`);
-        if (t)
-            classes.push(`mt-${t}`);
-        if (r)
-            classes.push(`mr-${r}`);
-        if (b)
-            classes.push(`mb-${b}`);
-        if (l)
-            classes.push(`ml-${l}`);
-        return classes.join(' ');
-    }
-    return value;
-};
 /**
  * Genera un campo per la selezione dinamica dei margini
  * @returns Field - Campo di tipo `group` per PayloadCMS
  */
 const fieldMargins = () => {
     return {
-        name: 'm',
         label: 'Margini',
-        type: 'group',
+        type: 'collapsible',
+        admin: {
+            initCollapsed: true,
+        },
         fields: [
-            {
-                name: 'className',
-                label: 'Classi CSS Margini',
-                type: 'text',
-                hooks: {
-                    beforeChange: [concatMarginFields],
-                },
-                admin: {
-                    readOnly: true,
-                    description: 'Questa stringa verrà generata automaticamente in base ai campi sottostanti.',
-                },
-            },
             {
                 type: 'row',
                 fields: [
                     fieldNumber({
-                        name: 'all',
+                        name: 'm-',
                         label: 'Tutti i lati',
-                        type: 'number',
+                        virtual: true,
                         min: 0,
                         max: 96,
                         admin: {
-                            width: '33%',
+                            width: '25%',
+                        },
+                        hooks: {
+                            afterRead: [getNumberValueFromClassNameString.getNumberValueFromClassNameString],
                         },
                     }),
                     fieldNumber({
-                        name: 'x',
+                        name: 'mx-',
                         label: 'Orizzontale',
-                        type: 'number',
+                        virtual: true,
                         min: 0,
                         max: 96,
                         admin: {
-                            width: '33%',
+                            width: '25%',
+                        },
+                        hooks: {
+                            afterRead: [getNumberValueFromClassNameString.getNumberValueFromClassNameString],
                         },
                     }),
                     fieldNumber({
-                        name: 'y',
+                        name: 'my-',
                         label: 'Verticale',
-                        type: 'number',
+                        virtual: true,
                         min: 0,
                         max: 96,
                         admin: {
-                            width: '33%',
+                            width: '25%',
+                        },
+                        hooks: {
+                            afterRead: [getNumberValueFromClassNameString.getNumberValueFromClassNameString],
                         },
                     }),
                     fieldNumber({
-                        name: 't',
+                        name: 'mt-',
                         label: 'Top',
-                        type: 'number',
+                        virtual: true,
                         min: 0,
                         max: 96,
                         admin: {
                             width: '25%',
                         },
+                        hooks: {
+                            afterRead: [getNumberValueFromClassNameString.getNumberValueFromClassNameString],
+                        },
                     }),
                     fieldNumber({
-                        name: 'r',
+                        name: 'mr-',
                         label: 'Right',
-                        type: 'number',
+                        virtual: true,
                         min: 0,
                         max: 96,
                         admin: {
                             width: '25%',
                         },
+                        hooks: {
+                            afterRead: [getNumberValueFromClassNameString.getNumberValueFromClassNameString],
+                        },
                     }),
                     fieldNumber({
-                        name: 'b',
+                        name: 'mb-',
                         label: 'Bottom',
-                        type: 'number',
+                        virtual: true,
                         min: 0,
                         max: 96,
                         admin: {
                             width: '25%',
                         },
+                        hooks: {
+                            afterRead: [getNumberValueFromClassNameString.getNumberValueFromClassNameString],
+                        },
                     }),
                     fieldNumber({
-                        name: 'l',
+                        name: 'ml-',
                         label: 'Left',
-                        type: 'number',
+                        virtual: true,
                         min: 0,
                         max: 96,
                         admin: {
                             width: '25%',
                         },
+                        hooks: {
+                            afterRead: [getNumberValueFromClassNameString.getNumberValueFromClassNameString],
+                        },
                     }),
                 ],
             },
         ],
-        admin: {
-            description: 'Definisce lo spazio esterno generale, orizzontale, verticale o per ciascun lato.',
-        },
     };
 };
 
 /**
- * Hook per concatenare le classi CSS di padding
- */
-const concatPaddingFields = (args) => {
-    const { value, siblingData, operation } = args;
-    if (operation === 'create' || operation === 'update') {
-        const paddings = siblingData || {};
-        const { all, x, y, t, r, b, l } = paddings;
-        const classes = [];
-        if (all)
-            classes.push(`p-${all}`);
-        if (x)
-            classes.push(`px-${x}`);
-        if (y)
-            classes.push(`py-${y}`);
-        if (t)
-            classes.push(`pt-${t}`);
-        if (r)
-            classes.push(`pr-${r}`);
-        if (b)
-            classes.push(`pb-${b}`);
-        if (l)
-            classes.push(`pl-${l}`);
-        return classes.join(' ');
-    }
-    return value;
-};
-/**
- * Genera un campo per la selezione dinamica dei padding
+ * Genera un campo per la selezione dinamica dei margini
  * @returns Field - Campo di tipo `group` per PayloadCMS
  */
 const fieldPaddings = () => {
     return {
-        name: 'p',
-        label: 'Padding',
-        type: 'group',
+        label: 'Paddings',
+        type: 'collapsible',
+        admin: {
+            initCollapsed: true,
+        },
         fields: [
-            {
-                name: 'className',
-                label: 'Classi CSS Padding',
-                type: 'text',
-                hooks: {
-                    beforeChange: [concatPaddingFields],
-                },
-                admin: {
-                    readOnly: true,
-                    description: 'Questa stringa verrà generata automaticamente in base ai campi sottostanti.',
-                },
-            },
             {
                 type: 'row',
                 fields: [
                     fieldNumber({
-                        name: 'all',
+                        name: 'p-',
                         label: 'Tutti i lati',
-                        type: 'number',
+                        virtual: true,
                         min: 0,
                         max: 96,
                         admin: {
-                            width: '33%',
+                            width: '25%',
+                        },
+                        hooks: {
+                            afterRead: [getNumberValueFromClassNameString.getNumberValueFromClassNameString],
                         },
                     }),
                     fieldNumber({
-                        name: 'x',
+                        name: 'px-',
                         label: 'Orizzontale',
-                        type: 'number',
+                        virtual: true,
                         min: 0,
                         max: 96,
                         admin: {
-                            width: '33%',
+                            width: '25%',
+                        },
+                        hooks: {
+                            afterRead: [getNumberValueFromClassNameString.getNumberValueFromClassNameString],
                         },
                     }),
                     fieldNumber({
-                        name: 'y',
+                        name: 'py-',
                         label: 'Verticale',
-                        type: 'number',
+                        virtual: true,
                         min: 0,
                         max: 96,
                         admin: {
-                            width: '33%',
+                            width: '25%',
+                        },
+                        hooks: {
+                            afterRead: [getNumberValueFromClassNameString.getNumberValueFromClassNameString],
                         },
                     }),
                     fieldNumber({
-                        name: 't',
+                        name: 'pt-',
                         label: 'Top',
-                        type: 'number',
+                        virtual: true,
                         min: 0,
                         max: 96,
                         admin: {
                             width: '25%',
                         },
+                        hooks: {
+                            afterRead: [getNumberValueFromClassNameString.getNumberValueFromClassNameString],
+                        },
                     }),
                     fieldNumber({
-                        name: 'r',
+                        name: 'pr-',
                         label: 'Right',
-                        type: 'number',
+                        virtual: true,
                         min: 0,
                         max: 96,
                         admin: {
                             width: '25%',
                         },
+                        hooks: {
+                            afterRead: [getNumberValueFromClassNameString.getNumberValueFromClassNameString],
+                        },
                     }),
                     fieldNumber({
-                        name: 'b',
+                        name: 'pb-',
                         label: 'Bottom',
-                        type: 'number',
+                        virtual: true,
                         min: 0,
                         max: 96,
                         admin: {
                             width: '25%',
                         },
+                        hooks: {
+                            afterRead: [getNumberValueFromClassNameString.getNumberValueFromClassNameString],
+                        },
                     }),
                     fieldNumber({
-                        name: 'l',
+                        name: 'pl-',
                         label: 'Left',
-                        type: 'number',
+                        virtual: true,
                         min: 0,
                         max: 96,
                         admin: {
                             width: '25%',
                         },
+                        hooks: {
+                            afterRead: [getNumberValueFromClassNameString.getNumberValueFromClassNameString],
+                        },
                     }),
                 ],
             },
         ],
-        admin: {
-            description: 'Definisce lo spazio interno generale, orizzontale, verticale o per ciascun lato.',
+    };
+};
+
+const concatCssFields = (args) => {
+    const { value, siblingData, operation } = args;
+    if (operation === 'create' || operation === 'update') {
+        console.log('BOOM HS?', siblingData);
+        const classes = [];
+        if (siblingData?.css) {
+            Object.entries(siblingData.css).forEach(([key, val]) => {
+                console.log(key, val);
+                if (key !== 'className' && val !== null && val !== undefined) {
+                    classes.push(`${key}${val}`);
+                }
+            });
+        }
+        const updatedClassName = classes.join(' ');
+        return {
+            ...siblingData?.css,
+            className: updatedClassName,
+        };
+    }
+    // Ritorna il valore originale se l'operazione non è "create" o "update"
+    return value;
+};
+const fieldCss = () => {
+    return {
+        name: 'css',
+        type: 'group',
+        label: 'Regole di stile',
+        hooks: {
+            beforeChange: [
+                (args) => {
+                    return concatCssFields(args);
+                },
+            ],
         },
+        fields: [
+            fieldText({
+                name: 'className',
+                label: 'className',
+                admin: { readOnly: true },
+            }),
+            {
+                type: 'tabs',
+                tabs: [
+                    {
+                        label: 'Spacing',
+                        fields: [fieldMargins(), fieldPaddings()],
+                    },
+                ],
+            },
+        ],
     };
 };
 
@@ -450,25 +469,11 @@ const fieldContainerProps = (customFields = []) => {
                     },
                     {
                         label: 'Dimensioni',
-                        fields: [
-                            fieldHeights(),
-                            {
-                                type: 'tabs',
-                                tabs: [
-                                    {
-                                        label: 'Margini',
-                                        fields: [fieldMargins()],
-                                    },
-                                    {
-                                        label: 'Paddings',
-                                        fields: [fieldPaddings()],
-                                    },
-                                ],
-                            },
-                        ],
+                        fields: [fieldHeights()],
                     },
                 ],
             },
+            fieldCss(),
         ],
     };
 };
@@ -881,65 +886,43 @@ const fieldSectionProps = (customFields = []) => {
                 tabs: [
                     {
                         label: 'Dimensioni',
-                        fields: [
-                            fieldViewportHeights(),
-                            {
-                                type: 'tabs',
-                                tabs: [
-                                    {
-                                        label: 'Margini',
-                                        fields: [fieldMargins()],
-                                    },
-                                    {
-                                        label: 'Paddings',
-                                        fields: [fieldPaddings()],
-                                    },
-                                ],
-                            },
-                        ],
+                        fields: [fieldViewportHeights()],
                     },
                 ],
             },
+            fieldCss(),
         ],
     };
 };
 
 const fieldSectionTabs = (options = {}) => {
-    const { config = true, section = true, container = true, content = true, configFields = [], sectionFields = [], containerFields = [], contentFields = [] } = options;
+    const { config = true, section = true, container = true, content = true, configFields = [], sectionFields = [], containerFields = [], contentFields = [], } = options;
     const tabs = [];
     if (config) {
         tabs.push({
             label: 'Configurazione',
-            fields: [
-                fieldConfigProps(configFields)
-            ],
+            fields: [fieldConfigProps(configFields)],
         });
     }
     // Tab per la sezione
     if (section) {
         tabs.push({
             label: 'Sezione',
-            fields: [
-                fieldSectionProps(sectionFields)
-            ],
+            fields: [fieldSectionProps(sectionFields)],
         });
     }
     // Tab per il container
     if (container) {
         tabs.push({
             label: 'Container',
-            fields: [
-                fieldContainerProps(containerFields)
-            ],
+            fields: [fieldContainerProps(containerFields)],
         });
     }
     // Tab per il contenuto
     if (content) {
         tabs.push({
             label: 'Contenuto',
-            fields: [
-                fieldContentProps(contentFields)
-            ],
+            fields: [fieldContentProps(contentFields)],
         });
     }
     return {
@@ -955,6 +938,7 @@ exports.fieldConfigProps = fieldConfigProps;
 exports.fieldContainerProps = fieldContainerProps;
 exports.fieldContainerWidths = fieldContainerWidths;
 exports.fieldContentProps = fieldContentProps;
+exports.fieldCss = fieldCss;
 exports.fieldHeights = fieldHeights;
 exports.fieldMargins = fieldMargins;
 exports.fieldNumber = fieldNumber;
@@ -969,4 +953,4 @@ exports.fieldThemeColor = fieldThemeColor;
 exports.fieldUpload = fieldUpload;
 exports.fieldViewportHeights = fieldViewportHeights;
 exports.iconsList = iconsList;
-//# sourceMappingURL=fieldSectionTabs-CmJ7R1Tc.js.map
+//# sourceMappingURL=fieldSectionTabs-Cd28NYFQ.js.map