blocks-dusted 0.1.2 → 0.1.3

package/templates/components/HeaderDD02/config.ts

@@ -0,0 +1,302 @@
+import type { Field } from 'payload'
+
+import { BlocksFeature, HeadingFeature } from '@payloadcms/richtext-lexical'
+
+import { defaultLexical } from '@/fields/defaultLexical'
+import { link } from '@/fields/link'
+import { iconPicker } from '@/fields/lucide-icon-picker/field'
+
+const headerRichTextEditor = defaultLexical({
+  features: [
+    HeadingFeature({
+      enabledHeadingSizes: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
+    }),
+    BlocksFeature({
+      blocks: [],
+    }),
+  ],
+})
+
+export const HeaderDD02: Field[] = [
+  {
+    admin: {
+      initCollapsed: true,
+      className: 'custom-css-class',
+      position: 'sidebar',
+    },
+    type: 'collapsible',
+    label: 'Scroll Behavior',
+    fields: [
+      {
+        name: 'enableHideOnScroll',
+        type: 'checkbox',
+        defaultValue: true,
+        admin: {
+          description:
+            'Enable hiding the header when scrolling down and showing it when scrolling up',
+        },
+      },
+      {
+        type: 'row',
+        fields: [
+          {
+            name: 'scrollThreshold',
+            type: 'number',
+            defaultValue: 100,
+            admin: {
+              width: '50%',
+              description: 'Scroll distance in pixels before the header hides when scrolling down',
+              condition: (_, siblingData) => Boolean(siblingData?.enableHideOnScroll),
+            },
+          },
+          {
+            name: 'animationDuration',
+            type: 'number',
+            defaultValue: 0.3,
+            admin: {
+              width: '50%',
+              description: 'Duration of the hide/show animation in seconds',
+              condition: (_, siblingData) => Boolean(siblingData?.enableHideOnScroll),
+            },
+          },
+        ],
+      },
+    ],
+  },
+  {
+    admin: {
+      initCollapsed: true,
+      className: 'custom-css-class',
+      position: 'sidebar',
+    },
+    type: 'collapsible',
+    label: 'Mobile Navigation',
+    fields: [
+      {
+        name: 'mobileNavVariant',
+        type: 'select',
+        defaultValue: 'standard',
+        options: [
+          { label: 'Standard', value: 'standard' },
+          { label: 'Header03 Style', value: 'header03' },
+        ],
+        admin: {
+          hidden: false,
+          description: 'Select the mobile navigation style',
+        },
+      },
+      {
+        name: 'mobileNavHeader03',
+        type: 'ui',
+        admin: {
+          position: 'main',
+          components: {
+            Field: '@/components/Admin/ui/componentInfo.tsx#MobileNavHeader03',
+          },
+        },
+      },
+      {
+        name: 'showMobileLabels',
+        type: 'checkbox',
+        defaultValue: true,
+        admin: {
+          description: 'Show labels under icons in the mobile bottom navigation bar',
+        },
+      },
+    ],
+  },
+  {
+    name: 'navItems',
+    type: 'array',
+    fields: [
+      {
+        name: 'type',
+        type: 'select',
+        options: [
+          { label: 'Simple Link', value: 'link' },
+          { label: 'Dropdown with RichText + Links', value: 'dropdown-richtext' },
+          { label: 'Dropdown - Single Column with Description', value: 'dropdown-single-desc' },
+          { label: 'Dropdown - Single Column no Description', value: 'dropdown-single' },
+          { label: 'Dropdown - Single Column with Icons', value: 'dropdown-icons' },
+        ],
+        defaultValue: 'link',
+      },
+      link({
+        appearances: false,
+        overrides: {
+          admin: {
+            condition: (_, siblingData) => siblingData?.type === 'link',
+          },
+        },
+      }),
+      {
+        name: 'showLabel',
+        label: 'Show label',
+        type: 'checkbox',
+        defaultValue: true,
+        admin: {
+          description: 'Toggle the label text for this nav item (useful for icon-only links).',
+          condition: (_, siblingData) => siblingData?.type === 'link',
+        },
+      },
+      {
+        name: 'label',
+        type: 'text',
+        required: true,
+        admin: {
+          description: 'Dropdown trigger label',
+          condition: (_, siblingData) => siblingData?.type !== 'link',
+        },
+      },
+      iconPicker({
+        name: 'triggerIcon',
+        description: 'Optional icon for dropdown trigger',
+        required: false,
+        overrides: (field) => ({
+          ...field,
+          admin: {
+            ...field.admin,
+            condition: (_, siblingData) => siblingData?.type !== 'link',
+          },
+        }),
+      }),
+      {
+        name: 'triggerIconPosition',
+        type: 'select',
+        defaultValue: 'before',
+        options: [
+          { label: 'Before', value: 'before' },
+          { label: 'After', value: 'after' },
+        ],
+        admin: {
+          description: 'Icon position for dropdown trigger',
+          condition: (_, siblingData) => siblingData?.type !== 'link',
+        },
+      },
+      {
+        name: 'richTextContent',
+        type: 'richText',
+        admin: {
+          description: 'Rich text content for the featured column',
+          condition: (_, siblingData) => siblingData?.type === 'dropdown-richtext',
+        },
+        editor: headerRichTextEditor,
+      },
+      {
+        name: 'v1_children',
+        label: 'Menu Items on Column 2',
+        type: 'array',
+        admin: {
+          description: 'Add dropdown menu items for RichText variant',
+          initCollapsed: true,
+          components: {
+            RowLabel: '/Header/RowLabel.tsx#RowLabel',
+          },
+          condition: (_, siblingData) => siblingData?.type === 'dropdown-richtext',
+        },
+        fields: [
+          link({ appearances: false }),
+          {
+            name: 'description',
+            label: 'Description',
+            type: 'text',
+            admin: {
+              description: 'Short description for menu items',
+            },
+          },
+        ],
+      },
+      {
+        name: 'v4_children',
+        label: 'Menu Items with Description',
+        type: 'array',
+        admin: {
+          description: 'Add dropdown menu items for single column with description',
+          initCollapsed: true,
+          components: {
+            RowLabel: '/Header/RowLabel.tsx#RowLabel',
+          },
+          condition: (_, siblingData) => siblingData?.type === 'dropdown-single-desc',
+        },
+        fields: [
+          link({ appearances: false }),
+          {
+            name: 'description',
+            label: 'Description',
+            type: 'text',
+            admin: {
+              description: 'Short description for menu items',
+            },
+          },
+        ],
+      },
+      {
+        name: 'v5_children',
+        label: 'Menu Items no Description',
+        type: 'array',
+        admin: {
+          description: 'Add dropdown menu items for single column without description',
+          initCollapsed: true,
+          components: {
+            RowLabel: '/Header/RowLabel.tsx#RowLabel',
+          },
+          condition: (_, siblingData) => siblingData?.type === 'dropdown-single',
+        },
+        fields: [link({ appearances: false })],
+      },
+      {
+        name: 'v6_children',
+        label: 'Menu Items with Icons',
+        type: 'array',
+        admin: {
+          description: 'Add dropdown menu items with icons',
+          initCollapsed: true,
+          components: {
+            RowLabel: '/Header/RowLabel.tsx#RowLabel',
+          },
+          condition: (_, siblingData) => siblingData?.type === 'dropdown-icons',
+        },
+        fields: [
+          link({
+            appearances: false,
+            overrides: {
+              admin: {
+                description: 'Link with icon support (icon field included in link)',
+              },
+            },
+          }),
+        ],
+      },
+    ],
+    admin: {
+      initCollapsed: true,
+      components: {
+        RowLabel: '/Header/RowLabel.tsx#RowLabel',
+      },
+      description:
+        'Add navigation items here. Each can be a simple link or different types of dropdown menus.',
+    },
+    maxRows: 8,
+  },
+  {
+    name: 'showFloatingContent',
+    label: 'Show Floating Content',
+    type: 'checkbox',
+    defaultValue: false,
+    admin: {
+      condition: (_, siblingData) => siblingData?.mobileNavVariant === 'header03',
+      description: 'Toggle to show/hide the floating content panel',
+    },
+  },
+  {
+    name: 'floatingContent',
+    label: 'Floating Content (Above Drawer)',
+    type: 'richText',
+    admin: {
+      condition: (_, siblingData) =>
+        siblingData?.mobileNavVariant === 'header03' && siblingData?.showFloatingContent === true,
+      description: 'Content that appears in the floating panel above the drawer',
+    },
+    editor: headerRichTextEditor,
+  },
+]