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) { getDirectiveThemeCSS(theme, params) {
return Theme.getDirectiveCSS(this.name, theme, params); return Theme.getDirectiveCSS(this.name, theme, params);
}, },
getLayerOrderThemeCSS() {
return Theme.getLayerOrderCSS(this.name);
},
getStyleSheet(extendedCSS = '', props = {}) { getStyleSheet(extendedCSS = '', props = {}) {
if (this.css) { if (this.css) {
const _css = ObjectUtils.minifyCSS(`${this.css}${extendedCSS}`); 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); 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) || {};
BaseStyle.loadTheme(primitive, { name: 'primitive-variables', useStyleOptions: this.$styleOptions }); BaseStyle.loadTheme(primitive, { name: 'primitive-variables', ...this.$styleOptions });
BaseStyle.loadTheme(semantic, { name: 'semantic-variables', useStyleOptions: this.$styleOptions }); BaseStyle.loadTheme(semantic, { name: 'semantic-variables', ...this.$styleOptions });
BaseComponentStyle.loadGlobalTheme(global, this.$styleOptions); BaseComponentStyle.loadGlobalTheme(global, this.$styleOptions);
// component // component
const { variables, style } = this.$style?.getComponentThemeCSS?.(theme, this.$themeParams) || {}; const { variables, style } = this.$style?.getComponentThemeCSS?.(theme, this.$themeParams) || {};
this.$style?.loadTheme(variables, { name: `${this.$style.name}-variables`, useStyleOptions: this.$styleOptions }); this.$style?.loadTheme(variables, { name: `${this.$style.name}-variables`, ...this.$styleOptions });
this.$style?.loadTheme(style, { useStyleOptions: this.$styleOptions }); this.$style?.loadTheme(style, 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;

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

@ -87,18 +87,23 @@ 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) || {};
BaseStyle.loadTheme(primitive, { name: 'primitive-variables', useStyleOptions }); BaseStyle.loadTheme(primitive, { name: 'primitive-variables', ...useStyleOptions });
BaseStyle.loadTheme(semantic, { name: 'semantic-variables', useStyleOptions }); BaseStyle.loadTheme(semantic, { name: 'semantic-variables', ...useStyleOptions });
BaseStyle.loadTheme(global, { name: 'global-style', useStyleOptions }); BaseStyle.loadTheme(global, { name: 'global-style', ...useStyleOptions });
// component // component
const { variables, style } = instance.$style?.getDirectiveThemeCSS?.(theme, themeParams) || {}; const { variables, style } = instance.$style?.getDirectiveThemeCSS?.(theme, themeParams) || {};
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 });
}, },
_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)}`;

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

@ -20,8 +20,8 @@ export default {
} }
}, },
layer: { layer: {
name: 'primevue' name: 'primevue',
//order: 'primevue' // @todo order: 'primevue'
} }
}, },
_pConfig: undefined, _pConfig: undefined,
@ -98,6 +98,9 @@ export default {
variables: ThemeUtils.getPresetD(options) variables: ThemeUtils.getPresetD(options)
}; };
}, },
getLayerOrderCSS(name = '') {
return ThemeUtils.getLayerOrder(name, this.options, this.defaults);
},
getCommonStyleSheet(name = '', theme, params, props = {}) { getCommonStyleSheet(name = '', theme, params, props = {}) {
return ThemeUtils.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; 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 = {}) { getCommonStyleSheet(name, theme = {}, params, props = {}) {
const { preset, base } = theme; const { preset, base } = theme;
const common_css = this.getCommon(preset, base, params, 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 styleRef = ref(null);
const defaultDocument = DomHandler.isClient() ? window.document : undefined; 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 = () => {}; let stop = () => {};
@ -41,7 +41,7 @@ export function useStyle(css, options = {}) {
media, media,
nonce: _nonce 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.setAttribute(styleRef.value, 'data-primevue-style-id', name);
DomHandler.setAttributes(styleRef.value, _styleProps); DomHandler.setAttributes(styleRef.value, _styleProps);
} }