@kilivi/payloadcms-theme-management 0.1.6 → 0.1.7

package/dist/fields/themeConfigurationField.js

@@ -1,17 +1,16 @@
-import { BASE_FONT_SIZE_OPTIONS, BODY_FONT_OPTIONS, HEADING_FONT_OPTIONS, LINE_HEIGHT_OPTIONS, } from '@/constants/themeFonts';
-import { darkModeField, lightModeField } from './colorModeFields';
-/**
- * Theme Configuration Field with Theme Selection as default value setter
- * Theme Selection populates lightMode/darkMode colors automatically
- */
-export function createThemeConfigurationField(options) {
-    const { themePresets, defaultTheme, includeColorModeToggle, includeCustomCSS, enableAdvancedFeatures = true, } = options;
-    const themeOptions = themePresets.map((preset) => {
+import { BASE_FONT_SIZE_OPTIONS, BODY_FONT_OPTIONS, HEADING_FONT_OPTIONS, LINE_HEIGHT_OPTIONS } from '../constants/themeFonts.js';
+import { darkModeField, lightModeField } from './colorModeFields.js';
+/**
+ * Theme Configuration Field with Theme Selection as default value setter
+ * Theme Selection populates lightMode/darkMode colors automatically
+ */ export function createThemeConfigurationField(options) {
+    const { themePresets, defaultTheme, includeColorModeToggle, includeCustomCSS, enableAdvancedFeatures = true } = options;
+    const themeOptions = themePresets.map((preset)=>{
         const previewColor = preset.preview?.colors.primary;
         const label = previewColor ? `${preset.label} • ${previewColor}` : preset.label;
         return {
             label,
-            value: preset.name,
+            value: preset.name
         };
     });
     const fields = [
@@ -23,18 +22,18 @@ export function createThemeConfigurationField(options) {
             options: themeOptions,
             label: {
                 en: '🎨 Theme Selection',
-                cs: '🎨 Výběr tématu',
+                cs: '🎨 Výběr tématu'
             },
             admin: {
                 description: {
                     en: 'Select a theme to auto-populate color values. You can customize colors after selection.',
-                    cs: 'Vyberte téma pro automatické předvyplnění barev. Po výběru můžete barvy upravit.',
+                    cs: 'Vyberte téma pro automatické předvyplnění barev. Po výběru můžete barvy upravit.'
                 },
                 components: {
-                    Field: '@payloadcms-plugins/theme-management/fields/ThemePreviewField',
-                },
-            },
-        },
+                    Field: '@payloadcms-plugins/theme-management/fields/ThemePreviewField'
+                }
+            }
+        }
     ];
     // Color Mode Settings
     if (includeColorModeToggle) {
@@ -42,14 +41,14 @@ export function createThemeConfigurationField(options) {
             type: 'collapsible',
             label: {
                 en: '🌗 Color Mode Settings',
-                cs: '🌗 Nastavení barevného režimu',
+                cs: '🌗 Nastavení barevného režimu'
             },
             admin: {
                 initCollapsed: false,
                 description: {
                     en: 'Configure light and dark mode colors. Changes here override theme selection.',
-                    cs: 'Nakonfigurujte barvy světlého a tmavého režimu. Změny zde přepíší výběr tématu.',
-                },
+                    cs: 'Nakonfigurujte barvy světlého a tmavého režimu. Změny zde přepíší výběr tématu.'
+                }
             },
             fields: [
                 {
@@ -60,69 +59,75 @@ export function createThemeConfigurationField(options) {
                             type: 'select',
                             label: {
                                 en: 'Default Color Mode',
-                                cs: 'Výchozí barevný režim',
+                                cs: 'Výchozí barevný režim'
                             },
                             defaultValue: 'auto',
                             options: [
                                 {
                                     label: {
                                         en: 'Auto (System)',
-                                        cs: 'Automaticky (Systém)',
+                                        cs: 'Automaticky (Systém)'
                                     },
-                                    value: 'auto',
+                                    value: 'auto'
                                 },
                                 {
-                                    label: { en: 'Light', cs: 'Světlý' },
-                                    value: 'light',
+                                    label: {
+                                        en: 'Light',
+                                        cs: 'Světlý'
+                                    },
+                                    value: 'light'
                                 },
                                 {
-                                    label: { en: 'Dark', cs: 'Tmavý' },
-                                    value: 'dark',
-                                },
+                                    label: {
+                                        en: 'Dark',
+                                        cs: 'Tmavý'
+                                    },
+                                    value: 'dark'
+                                }
                             ],
                             admin: {
                                 description: {
                                     en: 'Default color mode for visitors',
-                                    cs: 'Výchozí barevný režim pro návštěvníky',
+                                    cs: 'Výchozí barevný režim pro návštěvníky'
                                 },
-                                width: '50%',
-                            },
+                                width: '50%'
+                            }
                         },
                         {
                             name: 'allowColorModeToggle',
                             type: 'checkbox',
                             label: {
                                 en: 'Enable Mode Toggle',
-                                cs: 'Povolit přepínač režimu',
+                                cs: 'Povolit přepínač režimu'
                             },
                             defaultValue: true,
                             admin: {
                                 description: {
                                     en: 'Let visitors switch modes',
-                                    cs: 'Umožnit návštěvníkům přepínat režimy',
+                                    cs: 'Umožnit návštěvníkům přepínat režimy'
                                 },
-                                width: '50%',
-                            },
-                        },
-                    ],
+                                width: '50%'
+                            }
+                        }
+                    ]
                 },
                 lightModeField,
-                darkModeField,
-            ],
+                darkModeField
+            ]
         });
     }
     fields.push({
         type: 'collapsible',
         label: {
             en: '🅰️ Typography',
-            cs: '🅰️ Typografie',
+            cs: '🅰️ Typografie'
         },
         admin: {
             initCollapsed: true,
             description: {
                 en: 'Choose font families and base typography settings. Leave fields on "Use preset" to inherit the theme defaults.',
-                cs: 'Zvolte rodiny písem a základní typografické nastavení. Hodnota "Použít výchozí" zachová nastavení motivu.',
-            },
+                cs: 'Zvolte rodiny písem a základní typografické nastavení. Hodnota "Použít výchozí" zachová nastavení motivu.'
+            }
         },
         fields: [
             {
@@ -137,34 +142,34 @@ export function createThemeConfigurationField(options) {
                                 type: 'select',
                                 label: {
                                     en: 'Body font',
-                                    cs: 'Písmo pro text',
+                                    cs: 'Písmo pro text'
                                 },
                                 defaultValue: 'preset',
-                                options: BODY_FONT_OPTIONS.map((option) => ({
-                                    label: option.label,
-                                    value: option.value,
-                                })),
+                                options: BODY_FONT_OPTIONS.map((option)=>({
+                                        label: option.label,
+                                        value: option.value
+                                    })),
                                 admin: {
-                                    width: '50%',
-                                },
+                                    width: '50%'
+                                }
                             },
                             {
                                 name: 'headingFont',
                                 type: 'select',
                                 label: {
                                     en: 'Heading font',
-                                    cs: 'Písmo pro nadpisy',
+                                    cs: 'Písmo pro nadpisy'
                                 },
                                 defaultValue: 'preset',
-                                options: HEADING_FONT_OPTIONS.map((option) => ({
-                                    label: option.label,
-                                    value: option.value,
-                                })),
+                                options: HEADING_FONT_OPTIONS.map((option)=>({
+                                        label: option.label,
+                                        value: option.value
+                                    })),
                                 admin: {
-                                    width: '50%',
-                                },
-                            },
-                        ],
+                                    width: '50%'
+                                }
+                            }
+                        ]
                     },
                     {
                         type: 'row',
@@ -174,36 +179,36 @@ export function createThemeConfigurationField(options) {
                                 type: 'text',
                                 label: {
                                     en: 'Custom body font stack',
-                                    cs: 'Vlastní písmo pro text',
+                                    cs: 'Vlastní písmo pro text'
                                 },
                                 admin: {
                                     width: '50%',
                                     placeholder: '"IBM Plex Sans", sans-serif',
                                     description: {
                                         en: 'Provide full CSS font-family stack when using a custom font.',
-                                        cs: 'Při volbě vlastního písma zadejte celý CSS zápis font-family.',
+                                        cs: 'Při volbě vlastního písma zadejte celý CSS zápis font-family.'
                                     },
-                                    condition: (_, siblingData) => siblingData?.bodyFont === 'custom',
-                                },
+                                    condition: (_, siblingData)=>siblingData?.bodyFont === 'custom'
+                                }
                             },
                             {
                                 name: 'headingFontCustom',
                                 type: 'text',
                                 label: {
                                     en: 'Custom heading font stack',
-                                    cs: 'Vlastní písmo pro nadpisy',
+                                    cs: 'Vlastní písmo pro nadpisy'
                                 },
                                 admin: {
                                     width: '50%',
                                     placeholder: '"Cormorant Garamond", serif',
                                     description: {
                                         en: 'Provide full CSS font-family stack when using a custom heading font.',
-                                        cs: 'Při volbě vlastního nadpisového písma zadejte celý CSS zápis font-family.',
+                                        cs: 'Při volbě vlastního nadpisového písma zadejte celý CSS zápis font-family.'
                                     },
-                                    condition: (_, siblingData) => siblingData?.headingFont === 'custom',
-                                },
-                            },
-                        ],
+                                    condition: (_, siblingData)=>siblingData?.headingFont === 'custom'
+                                }
+                            }
+                        ]
                     },
                     {
                         type: 'row',
@@ -213,48 +218,48 @@ export function createThemeConfigurationField(options) {
                                 type: 'select',
                                 label: {
                                     en: 'Base font size',
-                                    cs: 'Základní velikost písma',
+                                    cs: 'Základní velikost písma'
                                 },
                                 defaultValue: 'preset',
-                                options: BASE_FONT_SIZE_OPTIONS.map((option) => ({
-                                    label: option.label,
-                                    value: option.value,
-                                })),
+                                options: BASE_FONT_SIZE_OPTIONS.map((option)=>({
+                                        label: option.label,
+                                        value: option.value
+                                    })),
                                 admin: {
-                                    width: '50%',
-                                },
+                                    width: '50%'
+                                }
                             },
                             {
                                 name: 'lineHeight',
                                 type: 'select',
                                 label: {
                                     en: 'Line height',
-                                    cs: 'Řádkování',
+                                    cs: 'Řádkování'
                                 },
                                 defaultValue: 'preset',
-                                options: LINE_HEIGHT_OPTIONS.map((option) => ({
-                                    label: option.label,
-                                    value: option.value,
-                                })),
+                                options: LINE_HEIGHT_OPTIONS.map((option)=>({
+                                        label: option.label,
+                                        value: option.value
+                                    })),
                                 admin: {
-                                    width: '50%',
-                                },
-                            },
-                        ],
-                    },
-                ],
-            },
-        ],
+                                    width: '50%'
+                                }
+                            }
+                        ]
+                    }
+                ]
+            }
+        ]
     });
     // Design Customization
     fields.push({
         type: 'collapsible',
         label: {
             en: '✨ Design Customization',
-            cs: '✨ Přizpůsobení designu',
+            cs: '✨ Přizpůsobení designu'
         },
         admin: {
-            initCollapsed: true,
+            initCollapsed: true
         },
         fields: [
             {
@@ -262,58 +267,124 @@ export function createThemeConfigurationField(options) {
                 type: 'select',
                 label: {
                     en: 'Border Radius',
-                    cs: 'Zaoblení rohů',
+                    cs: 'Zaoblení rohů'
                 },
                 defaultValue: 'medium',
                 options: [
-                    { label: { en: 'None', cs: 'Žádné' }, value: 'none' },
-                    { label: { en: 'Small', cs: 'Malé' }, value: 'small' },
-                    { label: { en: 'Medium', cs: 'Střední' }, value: 'medium' },
-                    { label: { en: 'Large', cs: 'Velké' }, value: 'large' },
-                    { label: { en: 'Full', cs: 'Plné' }, value: 'xl' },
+                    {
+                        label: {
+                            en: 'None',
+                            cs: 'Žádné'
+                        },
+                        value: 'none'
+                    },
+                    {
+                        label: {
+                            en: 'Small',
+                            cs: 'Malé'
+                        },
+                        value: 'small'
+                    },
+                    {
+                        label: {
+                            en: 'Medium',
+                            cs: 'Střední'
+                        },
+                        value: 'medium'
+                    },
+                    {
+                        label: {
+                            en: 'Large',
+                            cs: 'Velké'
+                        },
+                        value: 'large'
+                    },
+                    {
+                        label: {
+                            en: 'Full',
+                            cs: 'Plné'
+                        },
+                        value: 'xl'
+                    }
                 ],
                 admin: {
                     components: {
-                        Field: '@payloadcms-plugins/theme-management/fields/RadiusField',
+                        Field: '@payloadcms-plugins/theme-management/fields/RadiusField'
                     },
-                    width: '33%',
-                },
+                    width: '33%'
+                }
             },
             {
                 name: 'fontScale',
                 type: 'select',
                 label: {
                     en: 'Font Scale',
-                    cs: 'Velikost písma',
+                    cs: 'Velikost písma'
                 },
                 defaultValue: 'medium',
                 options: [
-                    { label: { en: 'Small', cs: 'Malé' }, value: 'small' },
-                    { label: { en: 'Medium', cs: 'Střední' }, value: 'medium' },
-                    { label: { en: 'Large', cs: 'Velké' }, value: 'large' },
+                    {
+                        label: {
+                            en: 'Small',
+                            cs: 'Malé'
+                        },
+                        value: 'small'
+                    },
+                    {
+                        label: {
+                            en: 'Medium',
+                            cs: 'Střední'
+                        },
+                        value: 'medium'
+                    },
+                    {
+                        label: {
+                            en: 'Large',
+                            cs: 'Velké'
+                        },
+                        value: 'large'
+                    }
                 ],
                 admin: {
-                    width: '33%',
-                },
+                    width: '33%'
+                }
             },
             {
                 name: 'spacing',
                 type: 'select',
                 label: {
                     en: 'Spacing',
-                    cs: 'Mezery',
+                    cs: 'Mezery'
                 },
                 defaultValue: 'medium',
                 options: [
-                    { label: { en: 'Compact', cs: 'Kompaktní' }, value: 'compact' },
-                    { label: { en: 'Medium', cs: 'Střední' }, value: 'medium' },
-                    { label: { en: 'Spacious', cs: 'Prostorné' }, value: 'spacious' },
+                    {
+                        label: {
+                            en: 'Compact',
+                            cs: 'Kompaktní'
+                        },
+                        value: 'compact'
+                    },
+                    {
+                        label: {
+                            en: 'Medium',
+                            cs: 'Střední'
+                        },
+                        value: 'medium'
+                    },
+                    {
+                        label: {
+                            en: 'Spacious',
+                            cs: 'Prostorné'
+                        },
+                        value: 'spacious'
+                    }
                 ],
                 admin: {
-                    width: '34%',
-                },
-            },
-        ],
+                    width: '34%'
+                }
+            }
+        ]
     });
     // Advanced Settings
     if (enableAdvancedFeatures) {
@@ -323,23 +394,47 @@ export function createThemeConfigurationField(options) {
                 type: 'select',
                 label: {
                     en: 'Animation Level',
-                    cs: 'Úroveň animací',
+                    cs: 'Úroveň animací'
                 },
                 defaultValue: 'medium',
                 options: [
-                    { label: { en: 'None', cs: 'Žádné' }, value: 'none' },
-                    { label: { en: 'Reduced', cs: 'Snížené' }, value: 'reduced' },
-                    { label: { en: 'Medium', cs: 'Střední' }, value: 'medium' },
-                    { label: { en: 'High', cs: 'Vysoké' }, value: 'high' },
+                    {
+                        label: {
+                            en: 'None',
+                            cs: 'Žádné'
+                        },
+                        value: 'none'
+                    },
+                    {
+                        label: {
+                            en: 'Reduced',
+                            cs: 'Snížené'
+                        },
+                        value: 'reduced'
+                    },
+                    {
+                        label: {
+                            en: 'Medium',
+                            cs: 'Střední'
+                        },
+                        value: 'medium'
+                    },
+                    {
+                        label: {
+                            en: 'High',
+                            cs: 'Vysoké'
+                        },
+                        value: 'high'
+                    }
                 ],
                 admin: {
                     description: {
                         en: 'Control website animations and transitions',
-                        cs: 'Kontrola animací a přechodů na webu',
+                        cs: 'Kontrola animací a přechodů na webu'
                     },
-                    width: '50%',
-                },
-            },
+                    width: '50%'
+                }
+            }
         ];
         if (includeCustomCSS) {
             advancedFields.push({
@@ -347,30 +442,27 @@ export function createThemeConfigurationField(options) {
                 type: 'code',
                 label: {
                     en: 'Custom CSS',
-                    cs: 'Vlastní CSS',
+                    cs: 'Vlastní CSS'
                 },
                 admin: {
                     language: 'css',
                     description: {
                         en: 'Add custom CSS to override default styles',
-                        cs: 'Přidejte vlastní CSS pro přepsání výchozích stylů',
-                    },
-                    // placeholder:
-                    //   ':root {\n  --primary: #your-color;\n  --border-radius: 8px;\n  --font-family: "Your Font";\n}\n\n.custom-class {\n  /* Your custom styles */\n}',
-                    // rows: 8,
-                },
+                        cs: 'Přidejte vlastní CSS pro přepsání výchozích stylů'
+                    }
+                }
             });
         }
         fields.push({
             type: 'collapsible',
             label: {
                 en: '⚙️ Advanced Settings',
-                cs: '⚙️ Pokročilé nastavení',
+                cs: '⚙️ Pokročilé nastavení'
             },
             admin: {
-                initCollapsed: true,
+                initCollapsed: true
             },
-            fields: advancedFields,
+            fields: advancedFields
         });
     }
     return {
@@ -380,10 +472,11 @@ export function createThemeConfigurationField(options) {
         admin: {
             description: {
                 en: 'Configure website appearance and styling',
-                cs: 'Nakonfigurujte vzhled a stylování webu',
-            },
+                cs: 'Nakonfigurujte vzhled a stylování webu'
+            }
         },
-        fields,
+        fields
     };
 }
+
 //# sourceMappingURL=themeConfigurationField.js.map