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

Theming API: Implement layer order

pull/5507/head
mertsincan 2024-03-18 10:57:17 +00:00
parent 926b085060
commit 592a8ed0c4
6 changed files with 40 additions and 13 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 {
getDirectiveThemeCSS(theme, params) {
return Theme.getDirectiveCSS(this.name, theme, params);
},
getLayerOrderThemeCSS() {
return Theme.getLayerOrderCSS(this.name);
},
getStyleSheet(extendedCSS = '', props = {}) {
if (this.css) {
const _css = ObjectUtils.minifyCSS(`${this.css}${extendedCSS}`);

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

@ -115,18 +115,23 @@ export default {
ObjectUtils.isNotEmpty(globalCSS) && BaseComponentStyle.loadGlobalStyle(globalCSS, this.$styleOptions);
},
_loadThemeStyles(theme) {
// layer order
const layerOrder = this.$style?.getLayerOrderThemeCSS();
BaseStyle.loadTheme(layerOrder, { name: 'layer-order', first: true, ...this.$styleOptions });
// common
const { primitive, semantic, global } = this.$style?.getCommonThemeCSS?.(theme, this.$themeParams) || {};
BaseStyle.loadTheme(primitive, { name: 'primitive-variables', useStyleOptions: this.$styleOptions });
BaseStyle.loadTheme(semantic, { name: 'semantic-variables', useStyleOptions: this.$styleOptions });
BaseStyle.loadTheme(primitive, { name: 'primitive-variables', ...this.$styleOptions });
BaseStyle.loadTheme(semantic, { name: 'semantic-variables', ...this.$styleOptions });
BaseComponentStyle.loadGlobalTheme(global, this.$styleOptions);
// component
const { variables, style } = this.$style?.getComponentThemeCSS?.(theme, this.$themeParams) || {};
this.$style?.loadTheme(variables, { name: `${this.$style.name}-variables`, useStyleOptions: this.$styleOptions });
this.$style?.loadTheme(style, { useStyleOptions: this.$styleOptions });
this.$style?.loadTheme(variables, { name: `${this.$style.name}-variables`, ...this.$styleOptions });
this.$style?.loadTheme(style, this.$styleOptions);
},
_getHostInstance(instance) {
return instance ? (this.$options.hostName ? (instance.$.type.name === this.$options.hostName ? instance : this._getHostInstance(instance.$parentInstance)) : instance.$parentInstance) : undefined;

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)}`;

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

@ -20,8 +20,8 @@ export default {
}
},
layer: {
name: 'primevue'
//order: 'primevue' // @todo
name: 'primevue',
order: 'primevue'
}
},
_pConfig: undefined,
@ -98,6 +98,9 @@ export default {
variables: ThemeUtils.getPresetD(options)
};
},
getLayerOrderCSS(name = '') {
return ThemeUtils.getLayerOrder(name, this.options, this.defaults);
},
getCommonStyleSheet(name = '', theme, params, props = {}) {
return ThemeUtils.getCommonStyleSheet(name, theme, params, props);
},

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

@ -110,6 +110,17 @@ export default {
return newColorScheme;
},
getLayerOrder(name, options = {}, defaults) {
const { layer } = options;
if (layer) {
const order = SharedUtils.object.getItemValue(layer.order || defaults.layer.order);
return `@layer ${order}`;
}
return '';
},
getCommonStyleSheet(name, theme = {}, params, props = {}) {
const { preset, base } = theme;
const common_css = this.getCommon(preset, base, params, theme);

4
components/lib/usestyle/UseStyle.js
View File

@ -19,7 +19,7 @@ export function useStyle(css, options = {}) {
const styleRef = ref(null);
const defaultDocument = DomHandler.isClient() ? window.document : undefined;
const { document = defaultDocument, immediate = true, manual = false, name = `style_${++_id}`, id = undefined, media = undefined, nonce = undefined, props = {} } = options;
const { document = defaultDocument, immediate = true, manual = false, name = `style_${++_id}`, id = undefined, media = undefined, nonce = undefined, first = false, props = {} } = options;
let stop = () => {};
@ -41,7 +41,7 @@ export function useStyle(css, options = {}) {
media,
nonce: _nonce
});
document.head.appendChild(styleRef.value);
first ? document.head.prepend(styleRef.value) : document.head.appendChild(styleRef.value);
DomHandler.setAttribute(styleRef.value, 'data-primevue-style-id', name);
DomHandler.setAttributes(styleRef.value, _styleProps);
}