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

Refactor

pull/5507/head
mertsincan 2024-03-05 11:59:37 +00:00
parent 6730af3d20
commit 23fbb68f52
3 changed files with 37 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
components/lib/base/style/BaseStyle.js
View File

@ -49,6 +49,9 @@ export default {
getBaseThemeCSS(baseCTheme, params, theme) {
return BaseThemeStyle.getBaseC(this.name, baseCTheme, params, theme);
},
getColorSchemeOption(colorScheme) {
return BaseThemeStyle.getColorSchemeOption(colorScheme);
},
getStyleSheet(extendedCSS = '', props = {}) {
if (this.css) {
const _css = ObjectUtils.minifyCSS(`${this.css}${extendedCSS}`);

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

@ -91,32 +91,15 @@ export default {
this._loadGlobalStyles();
this._hook('onBeforeMount');
// @todo
// apply colorScheme settings
const { colorScheme } = this.$globalThemeOptions || {};
let colorSchemeOption = {
light: {
class: '',
default: false
},
dark: {
class: 'p-dark',
default: false
}
};
if (colorScheme) {
if (ObjectUtils.isObject(colorScheme)) {
colorSchemeOption.light = { ...colorSchemeOption.light, ...colorScheme.light };
colorSchemeOption.dark = { ...colorSchemeOption.dark, ...colorScheme.dark };
} else {
colorSchemeOption.light = { ...colorSchemeOption.light, default: colorScheme !== 'auto' && colorScheme !== 'dark' };
colorSchemeOption.dark = { ...colorSchemeOption.dark, default: colorScheme === 'dark' };
}
const colorSchemeOption = BaseStyle.getColorSchemeOption(colorScheme);
const isClient = DomHandler.isClient();
const isAuto = !colorSchemeOption.light?.default && !colorSchemeOption.dark?.default;
const isDark = isAuto ? window.matchMedia('(prefers-color-scheme: dark)') : colorSchemeOption.dark?.default;
const defaultDocument = DomHandler.isClient() ? window.document : undefined;
const isDark = isAuto && isClient ? window.matchMedia('(prefers-color-scheme: dark)') : colorSchemeOption.dark?.default;
const defaultDocument = isClient ? window.document : undefined;
Theme.setColorMode(isDark ? 'dark' : 'light');

55
components/lib/basetheme/style/BaseThemeStyle.js
View File

@ -80,6 +80,32 @@ export default {
return css.join('');
},
getColorSchemeOption(colorScheme) {
let options = {
light: {
class: '',
rule: `:root{[CSS]}`,
default: false
},
dark: {
class: 'p-dark',
rule: `.p-dark{[CSS]}`,
default: false
}
};
if (colorScheme) {
if (ObjectUtils.isObject(colorScheme)) {
options.light = { ...options.light, ...colorScheme.light };
options.dark = { ...options.dark, ...colorScheme.dark };
} else {
options.light = { ...options.light, default: colorScheme !== 'auto' && colorScheme !== 'dark' };
options.dark = { ...options.dark, default: colorScheme === 'dark' };
}
}
return options;
},
_toVariables(theme, options) {
return toVariables(theme, { prefix: options?.prefix });
},
@ -87,28 +113,7 @@ export default {
const { layer, colorScheme } = options;
if (type !== 'style') {
let colorSchemeOption = {
light: {
class: '',
rule: `:root{[CSS]}`,
default: false
},
dark: {
class: 'p-dark',
rule: `.p-dark{[CSS]}`,
default: false
}
};
if (colorScheme) {
if (ObjectUtils.isObject(colorScheme)) {
colorSchemeOption.light = { ...colorSchemeOption.light, ...colorScheme.light };
colorSchemeOption.dark = { ...colorSchemeOption.dark, ...colorScheme.dark };
} else {
colorSchemeOption.light = { ...colorSchemeOption.light, default: colorScheme !== 'auto' && colorScheme !== 'dark' };
colorSchemeOption.dark = { ...colorSchemeOption.dark, default: colorScheme === 'dark' };
}
}
const colorSchemeOption = this.getColorSchemeOption(colorScheme);
mode = mode === 'dark' ? 'dark' : 'light';
css = colorSchemeOption[mode]?.rule?.replace('[CSS]', css);
@ -117,12 +122,10 @@ export default {
if (layer) {
let layerOptions = {
name: 'primevue'
//order: '@layer'
//order: 'primevue'
};
const _layer = ObjectUtils.isObject(layer) ? layer.name : layer;
layerOptions.name = ObjectUtils.getItemValue(_layer, { name, type });
ObjectUtils.isObject(layer) && (layerOptions.name = ObjectUtils.getItemValue(layer.name, { name, type }));
css = ObjectUtils.isNotEmpty(layerOptions.name) ? SharedUtils.object.getRule(`@layer ${layerOptions.name}`, css) : css;
}