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

Theming API: Refactor layers

pull/5507/head
mertsincan 2024-03-18 12:23:53 +00:00
parent 9836034fdb
commit a6f99cdc67
5 changed files with 59 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -115,11 +115,6 @@ export default {
ObjectUtils.isNotEmpty(globalCSS) && BaseComponentStyle.loadGlobalStyle(globalCSS, this.$styleOptions); ObjectUtils.isNotEmpty(globalCSS) && BaseComponentStyle.loadGlobalStyle(globalCSS, this.$styleOptions);
}, },
_loadThemeStyles(theme) { _loadThemeStyles(theme) {
// layer order
const layerOrder = this.$style?.getLayerOrderThemeCSS();
BaseStyle.loadTheme(layerOrder, { name: 'layer-order', first: true, ...this.$styleOptions });
// common // common
const { primitive, semantic, global } = this.$style?.getCommonThemeCSS?.(theme, this.$themeParams) || {}; const { primitive, semantic, global } = this.$style?.getCommonThemeCSS?.(theme, this.$themeParams) || {};
@ -132,6 +127,11 @@ export default {
this.$style?.loadTheme(variables, { name: `${this.$style.name}-variables`, ...this.$styleOptions }); this.$style?.loadTheme(variables, { name: `${this.$style.name}-variables`, ...this.$styleOptions });
this.$style?.loadTheme(style, this.$styleOptions); this.$style?.loadTheme(style, this.$styleOptions);
// layer order
const layerOrder = this.$style?.getLayerOrderThemeCSS();
BaseStyle.loadTheme(layerOrder, { name: 'layer-order', first: true, ...this.$styleOptions });
}, },
_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;

10
components/lib/basedirective/BaseDirective.js
View File

@ -87,11 +87,6 @@ const BaseDirective = {
_loadThemeStyles: (instance = {}, useStyleOptions) => { _loadThemeStyles: (instance = {}, useStyleOptions) => {
const [theme, themeParams] = [instance.theme(), instance.themeParams()]; const [theme, themeParams] = [instance.theme(), instance.themeParams()];
// layer order
const layerOrder = instance.$style?.getLayerOrderThemeCSS?.();
BaseStyle.loadTheme(layerOrder, { name: 'layer-order', first: true, ...useStyleOptions });
// common // common
const { primitive, semantic, global } = instance.$style?.getCommonThemeCSS?.(theme, themeParams) || {}; const { primitive, semantic, global } = instance.$style?.getCommonThemeCSS?.(theme, themeParams) || {};
@ -104,6 +99,11 @@ const BaseDirective = {
instance.$style?.loadTheme(variables, { name: `${instance.$name}-directive-variables`, ...useStyleOptions }); instance.$style?.loadTheme(variables, { name: `${instance.$name}-directive-variables`, ...useStyleOptions });
instance.$style?.loadTheme(style, { name: `${instance.$name}-directive-style`, ...useStyleOptions }); instance.$style?.loadTheme(style, { name: `${instance.$name}-directive-style`, ...useStyleOptions });
// layer order
const layerOrder = instance.$style?.getLayerOrderThemeCSS?.();
BaseStyle.loadTheme(layerOrder, { name: 'layer-order', first: true, ...useStyleOptions });
}, },
_hook: (directiveName, hookName, el, binding, vnode, prevVnode) => { _hook: (directiveName, hookName, el, binding, vnode, prevVnode) => {
const name = `on${ObjectUtils.toCapitalCase(hookName)}`; const name = `on${ObjectUtils.toCapitalCase(hookName)}`;

4
components/lib/config/PrimeVue.js
View File

@ -158,8 +158,8 @@ export const defaultOptions = {
}, },
layer: { layer: {
// layer: true | false | undefined | object // default: undefined // layer: true | false | undefined | object // default: undefined
name: '', // (component_name, type=variable|style) => layer_names // default: primevue name: '', // ({component_name, type=variable|style}) => layer_name // default: primevue
order: '' // (layer_names) => layer_order // default: @layer primevue order: '' // ({layer_names}) => layer_order // default: @layer primevue
}*/ }*/
}, },
extend: {} extend: {}

23
components/lib/themes/config/index.js
View File

@ -10,12 +10,12 @@ export default {
colorScheme: { colorScheme: {
light: { light: {
class: '', class: '',
rule: `:root{[CSS]}`, rule: ':root{[CSS]}',
default: false default: false
}, },
dark: { dark: {
class: 'p-dark', class: 'p-dark',
rule: `.p-dark{[CSS]}`, rule: '.p-dark{[CSS]}',
default: false default: false
} }
}, },
@ -28,6 +28,7 @@ export default {
_theme: undefined, _theme: undefined,
_initialized: false, _initialized: false,
_currentColorScheme: 'light', _currentColorScheme: 'light',
_layerNames: new Set(),
init() { init() {
if (!this._initialized) { if (!this._initialized) {
this.applyColorScheme(); this.applyColorScheme();
@ -65,6 +66,12 @@ export default {
setCurrentColorScheme(newValue) { setCurrentColorScheme(newValue) {
this._currentColorScheme = newValue; this._currentColorScheme = newValue;
}, },
getLayerNames() {
return [...this._layerNames];
},
setLayerNames(layerName) {
this._layerNames.add(layerName);
},
applyColorScheme() { applyColorScheme() {
const newColorScheme = ThemeUtils.applyColorScheme(this.options, this.getCurrentColorScheme(), this.defaults); const newColorScheme = ThemeUtils.applyColorScheme(this.options, this.getCurrentColorScheme(), this.defaults);
@ -80,10 +87,10 @@ export default {
return newColorScheme; return newColorScheme;
}, },
getCommonCSS(name = '', theme, params) { getCommonCSS(name = '', theme, params) {
return ThemeUtils.getCommon({ name, theme: theme || this.theme, params, defaults: this.defaults }); return ThemeUtils.getCommon({ name, theme: theme || this.theme, params, defaults: this.defaults, set: { layerNames: this.setLayerNames } });
}, },
getComponentCSS(name = '', theme, params) { getComponentCSS(name = '', theme, params) {
const options = { name, theme: theme || this.theme, params, defaults: this.defaults }; const options = { name, theme: theme || this.theme, params, defaults: this.defaults, set: { layerNames: this.setLayerNames } };
return { return {
style: ThemeUtils.getBaseC(options), style: ThemeUtils.getBaseC(options),
@ -91,7 +98,7 @@ export default {
}; };
}, },
getDirectiveCSS(name = '', theme, params) { getDirectiveCSS(name = '', theme, params) {
const options = { name, theme: theme || this.theme, params, defaults: this.defaults }; const options = { name, theme: theme || this.theme, params, defaults: this.defaults, set: { layerNames: this.setLayerNames } };
return { return {
style: ThemeUtils.getBaseD(options), style: ThemeUtils.getBaseD(options),
@ -99,12 +106,12 @@ export default {
}; };
}, },
getLayerOrderCSS(name = '') { getLayerOrderCSS(name = '') {
return ThemeUtils.getLayerOrder(name, this.options, this.defaults); return ThemeUtils.getLayerOrder(name, this.options, { names: this.getLayerNames() });
}, },
getCommonStyleSheet(name = '', theme, params, props = {}) { getCommonStyleSheet(name = '', theme, params, props = {}) {
return ThemeUtils.getCommonStyleSheet(name, theme, params, props); return ThemeUtils.getCommonStyleSheet({ name, theme, params, props, defaults: this.defaults, set: { layerNames: this.setLayerNames } });
}, },
getStyleSheet(name, theme = {}, params, props = {}) { getStyleSheet(name, theme = {}, params, props = {}) {
return ThemeUtils.getStyleSheet(name, theme, params, props); return ThemeUtils.getStyleSheet({ name, theme, params, props, defaults: this.defaults, set: { layerNames: this.setLayerNames } });
} }
}; };

56
components/lib/themes/utils/themeUtils.js
View File

@ -1,7 +1,7 @@
import { SharedUtils, dt, toVariables } from 'primevue/themes'; import { SharedUtils, dt, toVariables } from 'primevue/themes';
export default { export default {
getCommon({ name = '', theme = {}, params, defaults }) { getCommon({ name = '', theme = {}, params, set, defaults }) {
const { base, preset } = theme; const { base, preset } = theme;
let primitive_css, semantic_css, global_css; let primitive_css, semantic_css, global_css;
@ -18,8 +18,16 @@ export default {
const csRest_css = SharedUtils.object.isNotEmpty(csRest) ? this._toVariables({ light: { ...csRest, ...csRestExt } }, options).declarations : ''; const csRest_css = SharedUtils.object.isNotEmpty(csRest) ? this._toVariables({ light: { ...csRest, ...csRestExt } }, options).declarations : '';
const dark_css = SharedUtils.object.isNotEmpty(dark) ? this._toVariables({ dark: { ...dark, ...darkExt } }, options).declarations : ''; const dark_css = SharedUtils.object.isNotEmpty(dark) ? this._toVariables({ dark: { ...dark, ...darkExt } }, options).declarations : '';
primitive_css = this._transformCSS(name, prim_css, 'light', 'variable', options, defaults); primitive_css = this._transformCSS(name, prim_css, 'light', 'variable', options, set, defaults);
semantic_css = `${this._transformCSS(name, `${sRest_css}${csRest_css}color-scheme:light`, 'light', 'variable', options, defaults)}${this._transformCSS(name, `${dark_css}color-scheme:dark`, 'dark', 'variable', options, defaults)}`; semantic_css = `${this._transformCSS(name, `${sRest_css}${csRest_css}color-scheme:light`, 'light', 'variable', options, set, defaults)}${this._transformCSS(
name,
`${dark_css}color-scheme:dark`,
'dark',
'variable',
options,
set,
defaults
)}`;
} }
global_css = SharedUtils.object.getItemValue(base?.components?.global?.css, { ...params, dt: (tokenPath) => dt(theme, tokenPath) }); global_css = SharedUtils.object.getItemValue(base?.components?.global?.css, { ...params, dt: (tokenPath) => dt(theme, tokenPath) });
@ -30,7 +38,7 @@ export default {
global: global_css global: global_css
}; };
}, },
getPresetC({ name = '', theme = {}, params, defaults }) { getPresetC({ name = '', theme = {}, params, set, defaults }) {
const { preset, options, extend } = theme; const { preset, options, extend } = theme;
const { colorScheme, ...vRest } = preset?.components?.[name] || {}; const { colorScheme, ...vRest } = preset?.components?.[name] || {};
const { dark, ...csRest } = colorScheme || {}; const { dark, ...csRest } = colorScheme || {};
@ -40,16 +48,16 @@ export default {
const csRest_css = SharedUtils.object.isNotEmpty(csRest) ? this._toVariables({ [name]: { ...csRest, ...csRestExt } }, options).declarations : ''; const csRest_css = SharedUtils.object.isNotEmpty(csRest) ? this._toVariables({ [name]: { ...csRest, ...csRestExt } }, options).declarations : '';
const dark_css = SharedUtils.object.isNotEmpty(dark) ? this._toVariables({ [name]: { ...dark, ...darkExt } }, options).declarations : ''; const dark_css = SharedUtils.object.isNotEmpty(dark) ? this._toVariables({ [name]: { ...dark, ...darkExt } }, options).declarations : '';
return `${this._transformCSS(name, `${vRest_css}${csRest_css}`, 'light', 'variable', options, defaults)}${this._transformCSS(name, dark_css, 'dark', 'variable', options, defaults)}`; return `${this._transformCSS(name, `${vRest_css}${csRest_css}`, 'light', 'variable', options, set, defaults)}${this._transformCSS(name, dark_css, 'dark', 'variable', options, set, defaults)}`;
}, },
getBaseC({ name = '', theme = {}, params, defaults }) { getBaseC({ name = '', theme = {}, params, set, defaults }) {
const { base, options } = theme; const { base, options } = theme;
const { css } = base?.components?.[name] || {}; const { css } = base?.components?.[name] || {};
const computed_css = SharedUtils.object.getItemValue(css, { ...params, dt: (tokenPath) => dt(theme, tokenPath) }); const computed_css = SharedUtils.object.getItemValue(css, { ...params, dt: (tokenPath) => dt(theme, tokenPath) });
return this._transformCSS(name, computed_css, undefined, 'style', options, defaults); return this._transformCSS(name, computed_css, undefined, 'style', options, set, defaults);
}, },
getPresetD({ name = '', theme = {}, params, defaults }) { getPresetD({ name = '', theme = {}, params, set, defaults }) {
const { preset, options, extend } = theme; const { preset, options, extend } = theme;
const { colorScheme, ...vRest } = preset?.directives?.[name] || {}; const { colorScheme, ...vRest } = preset?.directives?.[name] || {};
const { dark, ...csRest } = colorScheme || {}; const { dark, ...csRest } = colorScheme || {};
@ -59,14 +67,14 @@ export default {
const csRest_css = SharedUtils.object.isNotEmpty(csRest) ? this._toVariables({ [name]: { ...csRest, ...csRestExt } }, options).declarations : ''; const csRest_css = SharedUtils.object.isNotEmpty(csRest) ? this._toVariables({ [name]: { ...csRest, ...csRestExt } }, options).declarations : '';
const dark_css = SharedUtils.object.isNotEmpty(dark) ? this._toVariables({ [name]: { ...dark, ...darkExt } }, options).declarations : ''; const dark_css = SharedUtils.object.isNotEmpty(dark) ? this._toVariables({ [name]: { ...dark, ...darkExt } }, options).declarations : '';
return `${this._transformCSS(name, `${vRest_css}${csRest_css}`, 'light', 'variable', options, defaults)}${this._transformCSS(name, dark_css, 'dark', 'variable', options, defaults)}`; return `${this._transformCSS(name, `${vRest_css}${csRest_css}`, 'light', 'variable', options, set, defaults)}${this._transformCSS(name, dark_css, 'dark', 'variable', options, set, defaults)}`;
}, },
getBaseD({ name = '', theme = {}, params, defaults }) { getBaseD({ name = '', theme = {}, params, set, defaults }) {
const { base, options } = theme; const { base, options } = theme;
const { css } = base?.directives?.[name] || {}; const { css } = base?.directives?.[name] || {};
const computed_css = SharedUtils.object.getItemValue(css, { ...params, dt: (tokenPath) => dt(theme, tokenPath) }); const computed_css = SharedUtils.object.getItemValue(css, { ...params, dt: (tokenPath) => dt(theme, tokenPath) });
return this._transformCSS(name, computed_css, undefined, 'style', options, defaults); return this._transformCSS(name, computed_css, undefined, 'style', options, set, defaults);
}, },
getColorSchemeOption(colorScheme, defaults) { getColorSchemeOption(colorScheme, defaults) {
let options = { ...defaults.colorScheme }; let options = { ...defaults.colorScheme };
@ -110,20 +118,19 @@ export default {
return newColorScheme; return newColorScheme;
}, },
getLayerOrder(name, options = {}, defaults) { getLayerOrder(name, options = {}, params, defaults) {
const { layer } = options; const { layer } = options;
if (layer) { if (layer) {
const order = SharedUtils.object.getItemValue(layer.order || defaults.layer.order); const order = SharedUtils.object.getItemValue(layer.order || defaults.layer.order, params);
return `@layer ${order}`; return `@layer ${order}`;
} }
return ''; return '';
}, },
getCommonStyleSheet(name, theme = {}, params, props = {}) { getCommonStyleSheet({ name = '', theme = {}, params, props = {}, set, defaults }) {
const { preset, base } = theme; const common_css = this.getCommon({ name, theme, params, set, defaults });
const common_css = this.getCommon(preset, base, params, theme);
const _props = Object.entries(props) const _props = Object.entries(props)
.reduce((acc, [k, v]) => acc.push(`${k}="${v}"`) && acc, []) .reduce((acc, [k, v]) => acc.push(`${k}="${v}"`) && acc, [])
.join(' '); .join(' ');
@ -140,12 +147,9 @@ export default {
}, []) }, [])
.join(''); .join('');
}, },
getStyleSheet(name, theme = {}, params, props = {}) { getStyleSheet({ name = '', theme = {}, params, props = {}, set, defaults }) {
const { preset, base } = theme; const presetC_css = this.getPresetC({ name, theme, params, set, defaults });
const presetCTheme = preset?.components?.[name]; const baseC_css = this.getBaseC({ name, theme, params, set, defaults });
const baseCTheme = base?.components?.[name];
const presetC_css = this.getPresetC(name, presetCTheme, theme);
const baseC_css = this.getBaseC(name, baseCTheme, params, theme);
const _props = Object.entries(props) const _props = Object.entries(props)
.reduce((acc, [k, v]) => acc.push(`${k}="${v}"`) && acc, []) .reduce((acc, [k, v]) => acc.push(`${k}="${v}"`) && acc, [])
.join(' '); .join(' ');
@ -160,7 +164,7 @@ export default {
_toVariables(theme, options) { _toVariables(theme, options) {
return toVariables(theme, { prefix: options?.prefix }); return toVariables(theme, { prefix: options?.prefix });
}, },
_transformCSS(name, css, mode, type, options = {}, defaults) { _transformCSS(name, css, mode, type, options = {}, set, defaults) {
if (SharedUtils.object.isNotEmpty(css)) { if (SharedUtils.object.isNotEmpty(css)) {
const { layer, colorScheme } = options; const { layer, colorScheme } = options;
@ -175,7 +179,11 @@ export default {
let layerOptions = { ...defaults.layer }; let layerOptions = { ...defaults.layer };
SharedUtils.object.isObject(layer) && (layerOptions.name = SharedUtils.object.getItemValue(layer.name, { name, type })); SharedUtils.object.isObject(layer) && (layerOptions.name = SharedUtils.object.getItemValue(layer.name, { name, type }));
css = SharedUtils.object.isNotEmpty(layerOptions.name) ? SharedUtils.object.getRule(`@layer ${layerOptions.name}`, css) : css;
if (SharedUtils.object.isNotEmpty(layerOptions.name)) {
css = SharedUtils.object.getRule(`@layer ${layerOptions.name}`, css);
set?.layerNames(layerOptions.name);
}
} }
return css; return css;