⚙️ Simple Settings (Auto-Generated UI)

The settings system automatically creates a visual configuration panel for your plugin options.

Basic Implementation

Add a settings property to your plugin:

export default {
    name: 'logo-loop',
    displayName: 'Logo Loop',
    version: '1.0.0',
    
    settings: {
        speed: {
            type: 'number',
            label: 'Animation Speed',
            default: 20,
            min: 5,
            max: 60,
            step: 1,
            unit: 's'
        },
        direction: {
            type: 'select',
            label: 'Scroll Direction',
            default: 'left',
            options: [
                { value: 'left', label: 'Left to Right' },
                { value: 'right', label: 'Right to Left' }
            ]
        },
        pauseOnHover: {
            type: 'boolean',
            label: 'Pause on Hover',
            default: true
        }
    },
    
    mount: function(element, options) {
        // Access settings via options.speed, options.direction, etc.
    }
};

Supported Field Types

Text Input

title: {
    type: 'text',
    label: 'Title',
    default: 'My Title',
    placeholder: 'Enter title...'
}

Textarea

description: {
    type: 'textarea',
    label: 'Description',
    default: '',
    rows: 4,
    placeholder: 'Enter description...'
}

Number

count: {
    type: 'number',
    label: 'Item Count',
    default: 5,
    min: 1,
    max: 20,
    step: 1,
    unit: 'items'
}

Boolean

enabled: {
    type: 'boolean',
    label: 'Enable Feature',
    default: true
}

Select (Dropdown)

size: {
    type: 'select',
    label: 'Size',
    default: 'medium',
    options: [
        { value: 'small', label: 'Small' },
        { value: 'medium', label: 'Medium' },
        { value: 'large', label: 'Large' }
    ]
}

Radio Buttons

alignment: {
    type: 'radio',
    label: 'Alignment',
    default: 'center',
    options: [
        { value: 'left', label: 'Left' },
        { value: 'center', label: 'Center' },
        { value: 'right', label: 'Right' }
    ]
}

Color Picker

backgroundColor: {
    type: 'color',
    label: 'Background Color',
    default: '#ffffff'
}

Range Slider

opacity: {
    type: 'range',
    label: 'Opacity',
    default: 100,
    min: 0,
    max: 100,
    step: 5,
    unit: '%'
}

Grouped Settings

For complex plugins, organize settings into collapsible groups:

export default {
    name: 'advanced-carousel',
    displayName: 'Advanced Carousel',
    version: '1.0.0',
    
    settings: {
        _groups: [
            {
                id: 'general',
                label: 'General Settings',
                fields: ['speed', 'autoplay', 'loop']
            },
            {
                id: 'appearance',
                label: 'Appearance',
                fields: ['showArrows', 'showDots', 'gap']
            }
        ],
        
        speed: {
            type: 'number',
            label: 'Transition Speed',
            default: 500,
            unit: 'ms',
            group: 'general'
        },
        autoplay: {
            type: 'boolean',
            label: 'Autoplay',
            default: true,
            group: 'general'
        },
        showArrows: {
            type: 'boolean',
            label: 'Show Navigation Arrows',
            default: true,
            group: 'appearance'
        }
    },
    
    mount: function(element, options) {
        // Access all settings via options
    }
};

Settings to HTML Attributes

The settings system automatically converts between:

Settings Definition → HTML Attributes → Options Object

// Setting key: camelCase
settings: {
    pauseOnHover: { type: 'boolean', default: true }
}

// HTML attribute: kebab-case with data-cb- prefix
data-cb-pause-on-hover="true"

// Options object: camelCase
mount: function(element, options) {
    console.log(options.pauseOnHover); // true
}