flexacore-ui-dev
Version:
Universal UI Framework for CDN, React, Angular, Vue, Svelte with TypeScript support
117 lines (116 loc) • 6.04 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ThemeManagerPlugin = void 0;
class ThemeManagerPlugin {
constructor() {
this.name = 'theme-manager';
this.version = '2.0.0';
this.currentTheme = 'default';
this.themes = new Map();
this.engine = null;
}
init(engine) {
this.engine = engine;
this.registerDefaultThemes();
// Không auto DOM, chỉ cung cấp API universal
}
registerDefaultThemes() {
this.registerTheme('default', {
name: 'Default',
colors: {
primary: '#007bff', secondary: '#6c757d', success: '#28a745', danger: '#dc3545',
warning: '#ffc107', info: '#17a2b8', light: '#f8f9fa', dark: '#343a40',
background: '#ffffff', surface: '#ffffff', text: '#212529', textSecondary: '#6c757d',
border: '#dee2e6', shadow: 'rgba(0, 0, 0, 0.1)'
},
typography: { fontFamily: 'sans', fontSize: 'base', lineHeight: 1.5 },
spacing: { base: '1rem', small: '0.5rem', large: '1.5rem' },
borderRadius: { small: '0.25rem', base: '0.375rem', large: '0.5rem' },
shadows: {
small: '0 1px 3px rgba(0, 0, 0, 0.1)', base: '0 4px 6px rgba(0, 0, 0, 0.1)', large: '0 10px 15px rgba(0, 0, 0, 0.1)'
}
});
this.registerTheme('dark', {
name: 'Dark',
colors: {
primary: '#0d6efd', secondary: '#6c757d', success: '#198754', danger: '#dc3545',
warning: '#ffc107', info: '#0dcaf0', light: '#212529', dark: '#f8f9fa',
background: '#121212', surface: '#1e1e1e', text: '#ffffff', textSecondary: '#adb5bd',
border: '#343a40', shadow: 'rgba(0, 0, 0, 0.3)'
},
typography: { fontFamily: 'sans', fontSize: 'base', lineHeight: 1.5 },
spacing: { base: '1rem', small: '0.5rem', large: '1.5rem' },
borderRadius: { small: '0.25rem', base: '0.375rem', large: '0.5rem' },
shadows: {
small: '0 1px 3px rgba(0, 0, 0, 0.3)', base: '0 4px 6px rgba(0, 0, 0, 0.3)', large: '0 10px 15px rgba(0, 0, 0, 0.3)'
}
});
this.registerTheme('light', {
name: 'Light',
colors: {
primary: '#0d6efd', secondary: '#6c757d', success: '#198754', danger: '#dc3545',
warning: '#ffc107', info: '#0dcaf0', light: '#f8f9fa', dark: '#212529',
background: '#ffffff', surface: '#f8f9fa', text: '#212529', textSecondary: '#6c757d',
border: '#dee2e6', shadow: 'rgba(0, 0, 0, 0.05)'
},
typography: { fontFamily: 'sans', fontSize: 'base', lineHeight: 1.6 },
spacing: { base: '1rem', small: '0.5rem', large: '1.5rem' },
borderRadius: { small: '0.25rem', base: '0.375rem', large: '0.5rem' },
shadows: {
small: '0 1px 3px rgba(0, 0, 0, 0.05)', base: '0 4px 6px rgba(0, 0, 0, 0.05)', large: '0 10px 15px rgba(0, 0, 0, 0.05)'
}
});
this.registerTheme('high-contrast', {
name: 'High Contrast',
colors: {
primary: '#000000', secondary: '#333333', success: '#006600', danger: '#cc0000',
warning: '#cc6600', info: '#0066cc', light: '#ffffff', dark: '#000000',
background: '#ffffff', surface: '#ffffff', text: '#000000', textSecondary: '#333333',
border: '#000000', shadow: 'rgba(0, 0, 0, 0.5)'
},
typography: { fontFamily: 'sans', fontSize: 'lg', lineHeight: 1.4 },
spacing: { base: '1.25rem', small: '0.75rem', large: '2rem' },
borderRadius: { small: '0', base: '0', large: '0' },
shadows: {
small: '2px 2px 0 rgba(0, 0, 0, 0.5)', base: '4px 4px 0 rgba(0, 0, 0, 0.5)', large: '6px 6px 0 rgba(0, 0, 0, 0.5)'
}
});
}
registerTheme(name, theme) {
var _a, _b;
this.themes.set(name, { ...theme, name: theme.name || name });
(_b = (_a = this.engine) === null || _a === void 0 ? void 0 : _a.log) === null || _b === void 0 ? void 0 : _b.call(_a, `Theme "${name}" registered`);
}
applyTheme(themeName) {
var _a, _b, _c, _d, _e, _f, _g, _h;
const theme = this.themes.get(themeName);
if (!theme) {
(_b = (_a = this.engine) === null || _a === void 0 ? void 0 : _a.warn) === null || _b === void 0 ? void 0 : _b.call(_a, `Theme "${themeName}" not found`);
return;
}
this.currentTheme = themeName;
(_d = (_c = this.engine) === null || _c === void 0 ? void 0 : _c.setState) === null || _d === void 0 ? void 0 : _d.call(_c, 'theme', themeName);
(_f = (_e = this.engine) === null || _e === void 0 ? void 0 : _e.emit) === null || _f === void 0 ? void 0 : _f.call(_e, 'theme-change', { theme: themeName, themeData: theme });
(_h = (_g = this.engine) === null || _g === void 0 ? void 0 : _g.log) === null || _h === void 0 ? void 0 : _h.call(_g, `Theme "${themeName}" applied`);
}
toggleTheme() {
const themes = Array.from(this.themes.keys());
const currentIndex = themes.indexOf(this.currentTheme);
const nextIndex = (currentIndex + 1) % themes.length;
this.applyTheme(themes[nextIndex]);
}
getCurrentTheme() { return this.currentTheme; }
getTheme(name) { return this.themes.get(name); }
getAllThemes() { return Array.from(this.themes.entries()); }
getAPI() {
return {
applyTheme: this.applyTheme.bind(this),
toggleTheme: this.toggleTheme.bind(this),
getCurrentTheme: this.getCurrentTheme.bind(this),
getTheme: this.getTheme.bind(this),
getAllThemes: this.getAllThemes.bind(this),
registerTheme: this.registerTheme.bind(this)
};
}
}
exports.ThemeManagerPlugin = ThemeManagerPlugin;