primevue-mirror/components/lib/themes/config/index.js

105 lines
3.5 KiB
JavaScript
Raw Normal View History

2024-03-13 12:05:23 +00:00
import { ThemeUtils } from 'primevue/themes';
2024-03-05 09:22:33 +00:00
export default {
2024-03-13 12:05:23 +00:00
defaults: {
variable: {
prefix: '',
selector: ':root',
excludedKeyRegex: /^(primitive|semantic|variables|colorscheme|light|dark|common|colors|root|states|components|directives)$/gi
2024-03-13 12:05:23 +00:00
},
2024-03-21 09:08:51 +00:00
darkModeSelector: '.p-dark',
cssLayer: {
2024-03-18 10:57:17 +00:00
name: 'primevue',
order: 'primevue'
2024-03-13 12:05:23 +00:00
}
},
2024-03-05 09:22:33 +00:00
_pConfig: undefined,
2024-03-13 12:05:23 +00:00
_theme: undefined,
_initialized: false,
_currentColorScheme: 'light',
2024-03-18 12:23:53 +00:00
_layerNames: new Set(),
_tokens: {},
2024-03-13 12:05:23 +00:00
init() {
if (!this._initialized) {
2024-03-21 09:08:51 +00:00
this._tokens = ThemeUtils.createTokens(this.preset, this.getCurrentColorScheme(), this.defaults);
2024-03-13 12:05:23 +00:00
}
this._initialized = true;
},
get theme() {
return this._theme || this._pConfig?.theme;
},
get base() {
return this.theme?.base || {};
},
get preset() {
return this.theme?.preset || {};
},
get options() {
return this.theme?.options || {};
},
get tokens() {
return this._tokens;
},
2024-03-05 09:22:33 +00:00
getPConfig() {
return this._pConfig;
},
setPConfig(newValue) {
this._pConfig = newValue;
},
getTokenValue(tokenPath) {
return ThemeUtils.getTokenValue(this.tokens, tokenPath, this.defaults);
},
2024-03-13 12:05:23 +00:00
setTheme(newValue) {
this._theme = newValue;
this._tokens = ThemeUtils.createTokens(newValue, this.defaults);
2024-03-05 09:22:33 +00:00
},
2024-03-13 12:05:23 +00:00
getCurrentColorScheme() {
return this._currentColorScheme;
2024-03-05 09:22:33 +00:00
},
2024-03-13 12:05:23 +00:00
setCurrentColorScheme(newValue) {
this._currentColorScheme = newValue;
2024-03-12 09:46:43 +00:00
},
2024-03-18 12:23:53 +00:00
getLayerNames() {
return [...this._layerNames];
},
setLayerNames(layerName) {
2024-03-18 12:37:07 +00:00
this._layerNames?.add(layerName);
2024-03-18 12:23:53 +00:00
},
2024-03-06 10:38:51 +00:00
toggleColorScheme() {
2024-03-13 12:05:23 +00:00
const newColorScheme = ThemeUtils.toggleColorScheme(this.options, this.getCurrentColorScheme(), this.defaults);
2024-03-05 09:22:33 +00:00
2024-03-13 12:05:23 +00:00
this.setCurrentColorScheme(newColorScheme);
2024-03-06 10:38:51 +00:00
2024-03-13 12:05:23 +00:00
return newColorScheme;
},
getCommonCSS(name = '', theme, params) {
2024-03-18 12:37:07 +00:00
return ThemeUtils.getCommon({ name, theme: theme || this.theme, params, defaults: this.defaults, set: { layerNames: this.setLayerNames.bind(this) } });
2024-03-13 12:05:23 +00:00
},
getComponentCSS(name = '', theme, params) {
2024-03-18 12:37:07 +00:00
const options = { name, theme: theme || this.theme, params, defaults: this.defaults, set: { layerNames: this.setLayerNames.bind(this) } };
2024-03-05 09:22:33 +00:00
2024-03-13 12:05:23 +00:00
return {
style: ThemeUtils.getBaseC(options),
variables: ThemeUtils.getPresetC(options)
};
},
getDirectiveCSS(name = '', theme, params) {
2024-03-18 12:37:07 +00:00
const options = { name, theme: theme || this.theme, params, defaults: this.defaults, set: { layerNames: this.setLayerNames.bind(this) } };
2024-03-05 09:22:33 +00:00
2024-03-13 12:05:23 +00:00
return {
style: ThemeUtils.getBaseD(options),
variables: ThemeUtils.getPresetD(options)
};
},
2024-03-18 10:57:17 +00:00
getLayerOrderCSS(name = '') {
2024-03-21 09:08:51 +00:00
return ThemeUtils.getLayerOrder(name, this.options, { names: this.getLayerNames() }, this.defaults);
2024-03-18 10:57:17 +00:00
},
2024-03-13 12:05:23 +00:00
getCommonStyleSheet(name = '', theme, params, props = {}) {
2024-03-18 12:37:07 +00:00
return ThemeUtils.getCommonStyleSheet({ name, theme, params, props, defaults: this.defaults, set: { layerNames: this.setLayerNames.bind(this) } });
2024-03-13 12:05:23 +00:00
},
getStyleSheet(name, theme = {}, params, props = {}) {
2024-03-18 12:37:07 +00:00
return ThemeUtils.getStyleSheet({ name, theme, params, props, defaults: this.defaults, set: { layerNames: this.setLayerNames.bind(this) } });
2024-03-05 09:22:33 +00:00
}
};