vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Theme: Update on BaseComponent structure

pull/5507/head
mertsincan 2024-02-11 09:37:25 +00:00
parent 641b84a34a
commit 31f465c702
2 changed files with 20 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
components/lib/basecomponent/BaseComponent.vue
View File

@ -41,16 +41,14 @@ export default {
handler(newValue) { handler(newValue) {
if (newValue) { if (newValue) {
const { variables, css } = this.$globalTheme; const { variables, css } = this.$globalTheme;
/* variables */ const { colorScheme, ...vRest } = variables || {};
//const { dark, ...rest } = variables || {}; const { dark, ...csRest } = colorScheme || {};
const vRest_css = ObjectUtils.isNotEmpty(vRest) ? toVariables({ [this.$style.name]: vRest }).css : '';
const csRest_css = ObjectUtils.isNotEmpty(csRest) ? toVariables({ [this.$style.name]: csRest }).css : '';
const dark_css = ObjectUtils.isNotEmpty(dark) ? toVariables({ [this.$style.name]: dark }, { selector: '.p-dark' }).css : '';
const variables_css = `${vRest_css}${csRest_css}${dark_css}`;
// common + light this.$style?.loadTheme(`${variables_css}${css}`, { useStyleOptions: this.$styleOptions });
//this.$style?.loadTheme(toVariables({ [this.$style.name]: rest }).css, { name: `${this.$style.name}-variables`, nonce: this.$config?.csp?.nonce });
// dark
//this.$style?.loadTheme(toVariables({ [this.$style.name]: dark }, { selector: '.p-dark' }).css, { name: `${this.$style.name}-dark-variables`, nonce: this.$config?.csp?.nonce });
/* css */
this.$style?.loadTheme(css, { useStyleOptions: this.$styleOptions });
} }
} }
} }
@ -124,7 +122,16 @@ export default {
BaseComponentStyle.loadGlobalTheme(this.$presetTheme?.components?.global?.css, { nonce: this.$config?.csp?.nonce }); BaseComponentStyle.loadGlobalTheme(this.$presetTheme?.components?.global?.css, { nonce: this.$config?.csp?.nonce });
}, },
_loadThemeVariables() { _loadThemeVariables() {
const { primitive, semantic } = this.$presetTheme; const { variables } = this.$presetTheme;
const { colorScheme, ...vRest } = variables || {};
const { dark, ...csRest } = colorScheme || {};
const vRest_css = ObjectUtils.isNotEmpty(vRest) ? toVariables({ light: vRest }).css : '';
const csRest_css = ObjectUtils.isNotEmpty(csRest) ? toVariables({ light: csRest }).css : '';
const dark_css = ObjectUtils.isNotEmpty(dark) ? toVariables({ dark }, { selector: '.p-dark' }).css : '';
const variables_css = `${vRest_css}${csRest_css}${dark_css}`;
BaseStyle.loadTheme(variables_css, { name: 'theme-variables', nonce: this.$config?.csp?.nonce });
/*const { primitive, semantic } = this.$presetTheme;
const { colorScheme, ...sRest } = semantic || {}; const { colorScheme, ...sRest } = semantic || {};
const { dark, ...csRest } = colorScheme || {}; const { dark, ...csRest } = colorScheme || {};
@ -140,7 +147,8 @@ export default {
const v = toVariables({ [key]: value }); const v = toVariables({ [key]: value });
BaseStyle.loadTheme(v.css, { name: `${key}-variables`, nonce: this.$config?.csp?.nonce }); BaseStyle.loadTheme(v.css, { name: `${key}-variables`, nonce: this.$config?.csp?.nonce });
});*/ });
*/
}, },
_getHostInstance(instance) { _getHostInstance(instance) {
return instance ? (this.$options.hostName ? (instance.$.type.name === this.$options.hostName ? instance : this._getHostInstance(instance.$parentInstance)) : instance.$parentInstance) : undefined; return instance ? (this.$options.hostName ? (instance.$.type.name === this.$options.hostName ? instance : this._getHostInstance(instance.$parentInstance)) : instance.$parentInstance) : undefined;

2
components/lib/theme/utils/toVariables.js
View File

@ -3,7 +3,7 @@ import SharedUtils from './sharedUtils';
const VARIABLE = { const VARIABLE = {
PREFIX: 'p', PREFIX: 'p',
SELECTOR: ':root', SELECTOR: ':root',
EXCLUDED_KEY_REGEX: /^(primitive|semantic|colorscheme|light|common|root|states)$/gi EXCLUDED_KEY_REGEX: /^(primitive|semantic|variables|colorscheme|light|dark|common|colors|root|states)$/gi
}; };
export default function (theme, options = {}) { export default function (theme, options = {}) {