Settings management system for configuring tools and creating custom settings interfaces. The Settings tool provides a unified interface for configuring all Eruda tools and creating custom configuration panels.
Create various types of settings controls for tool configuration.
/**
* Add toggle switch setting
* @param cfg - Configuration object
* @param name - Configuration key
* @param desc - Description text
* @returns Settings instance for chaining
*/
switch(cfg: object, name: string, desc: string): Settings;
/**
* Add select dropdown setting
* @param cfg - Configuration object
* @param name - Configuration key
* @param desc - Description text
* @param selections - Array of option values
* @returns Settings instance for chaining
*/
select(cfg: object, name: string, desc: string, selections: string[]): Settings;
/**
* Add range slider setting
* @param cfg - Configuration object
* @param name - Configuration key
* @param desc - Description text
* @param options - Range configuration options with defaults
* @returns Settings instance for chaining
*/
range(cfg: object, name: string, desc: string, options: {
min?: number;
max?: number;
step?: number;
} = { min: 0, max: 1, step: 0.1 }): Settings;
/**
* Add button setting
* @param text - Button text
* @param handler - Click handler function
* @returns Settings instance for chaining
*/
button(text: string, handler: Function): Settings;
interface RangeOptions {
min?: number;
max?: number;
step?: number;
}Organize settings with text labels and separators.
/**
* Add text label
* @param text - Label text
* @returns Settings instance for chaining
*/
text(text: string): Settings;
/**
* Add visual separator
* @returns Settings instance for chaining
*/
separator(): Settings;
/**
* Remove setting item
* @param cfg - Configuration object
* @param name - Setting name to remove
* @returns Settings instance for chaining
*/
remove(cfg: object, name: string): Settings;
/**
* Clear all settings
* @returns Settings instance for chaining
*/
clear(): Settings;Create and manage configuration stores.
/**
* Create configuration store
* @param name - Configuration name
* @param data - Default configuration data
* @returns Configuration store instance
*/
static createCfg(name: string, data: object): LocalStore;
interface LocalStore {
get(key: string): any;
set(key: string, value: any): void;
remove(key: string): void;
clear(): void;
}Usage Examples:
const settings = eruda.get('settings');
// Create configuration store
const myConfig = eruda.Settings.createCfg('myTool', {
enabled: true,
maxItems: 50,
theme: 'auto',
refreshRate: 1000
});
// Add settings controls
settings.text('My Tool Settings');
settings.switch(myConfig, 'enabled', 'Enable my tool');
settings.select(myConfig, 'theme', 'Color theme', [
'light', 'dark', 'auto'
]);
settings.range(myConfig, 'maxItems', 'Maximum items', {
min: 10,
max: 100,
step: 10
});
settings.range(myConfig, 'refreshRate', 'Refresh rate (ms)', {
min: 500,
max: 5000,
step: 500
});
settings.button('Reset to Defaults', () => {
myConfig.set('enabled', true);
myConfig.set('maxItems', 50);
myConfig.set('theme', 'auto');
myConfig.set('refreshRate', 1000);
});
settings.separator();
// Access configuration values
const isEnabled = myConfig.get('enabled');
const currentTheme = myConfig.get('theme');The Settings tool automatically manages configuration persistence and provides a consistent UI for all tool settings.