vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-09 00:42:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

Theming API: Implement layer order

Browse source
This commit is contained in:
mertsincan 2024-03-18 10:57:17 +00:00
parent 926b085060
commit 592a8ed0c4
6 changed files with 40 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

15
components/lib/basedirective/BaseDirective.js
View file

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