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

Fixed #6452 - Add style keyword to themes section to inject custom styles

pull/6454/head
Mert Sincan 2024-09-22 14:22:07 +01:00
parent 9c7ac6c05a
commit d959cb0493
6 changed files with 30 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/core/src/base/style/BaseStyle.js
View File

@ -164,8 +164,8 @@ export default {
loadCSS(options = {}) {
return this.load(this.css, options);
},
loadTheme(options = {}) {
return this.load(this.theme, options, (computedStyle) => Theme.transformCSS(options.name || this.name, computedStyle));
loadTheme(options = {}, style = '') {
return this.load(this.theme, options, (computedStyle) => Theme.transformCSS(options.name || this.name, `${computedStyle}${style}`));
},
getCommonTheme(params) {
return Theme.getCommon(this.name, params);

8
packages/core/src/basecomponent/BaseComponent.vue
View File

@ -159,21 +159,21 @@ export default {
// common
if (!Theme.isStyleNameLoaded('common')) {
const { primitive, semantic } = this.$style?.getCommonTheme?.() || {};
const { primitive, semantic, style } = this.$style?.getCommonTheme?.() || {};
BaseStyle.load(primitive?.css, { name: 'primitive-variables', ...this.$styleOptions });
BaseStyle.load(semantic?.css, { name: 'semantic-variables', ...this.$styleOptions });
BaseStyle.loadTheme({ name: 'global-style', ...this.$styleOptions });
BaseStyle.loadTheme({ name: 'global-style', ...this.$styleOptions }, style);
Theme.setLoadedStyleName('common');
}
// component
if (!Theme.isStyleNameLoaded(this.$style?.name) && this.$style?.name) {
const { css } = this.$style?.getComponentTheme?.() || {};
const { css, style } = this.$style?.getComponentTheme?.() || {};
this.$style?.load(css, { name: `${this.$style.name}-variables`, ...this.$styleOptions });
this.$style?.loadTheme({ name: `${this.$style.name}-style`, ...this.$styleOptions });
this.$style?.loadTheme({ name: `${this.$style.name}-style`, ...this.$styleOptions }, style);
Theme.setLoadedStyleName(this.$style.name);
}

8
packages/core/src/basedirective/BaseDirective.js
View File

@ -91,21 +91,21 @@ const BaseDirective = {
// common
if (!Theme.isStyleNameLoaded('common')) {
const { primitive, semantic } = instance.$style?.getCommonTheme?.() || {};
const { primitive, semantic, style } = instance.$style?.getCommonTheme?.() || {};
BaseStyle.load(primitive?.css, { name: 'primitive-variables', ...useStyleOptions });
BaseStyle.load(semantic?.css, { name: 'semantic-variables', ...useStyleOptions });
BaseStyle.loadTheme({ name: 'global-style', ...useStyleOptions });
BaseStyle.loadTheme({ name: 'global-style', ...useStyleOptions }, style);
Theme.setLoadedStyleName('common');
}
// directive
if (!Theme.isStyleNameLoaded(instance.$style?.name) && instance.$style?.name) {
const { css } = instance.$style?.getDirectiveTheme?.() || {};
const { css, style } = instance.$style?.getDirectiveTheme?.() || {};
instance.$style?.load(css, { name: `${instance.$style.name}-variables`, ...useStyleOptions });
instance.$style?.loadTheme({ name: `${instance.$style.name}-style`, ...useStyleOptions });
instance.$style?.loadTheme({ name: `${instance.$style.name}-style`, ...useStyleOptions }, style);
Theme.setLoadedStyleName(instance.$style.name);
}

4
packages/core/src/config/PrimeVue.js
View File

@ -195,12 +195,12 @@ export function setupConfig(app, PrimeVue) {
const loadCommonTheme = () => {
// common
if (!Theme.isStyleNameLoaded('common')) {
const { primitive, semantic } = BaseStyle.getCommonTheme?.() || {};
const { primitive, semantic, style } = BaseStyle.getCommonTheme?.() || {};
const styleOptions = { nonce: PrimeVue.config?.csp?.nonce };
BaseStyle.load(primitive?.css, { name: 'primitive-variables', ...styleOptions });
BaseStyle.load(semantic?.css, { name: 'semantic-variables', ...styleOptions });
BaseStyle.loadTheme({ name: 'global-style', ...styleOptions });
BaseStyle.loadTheme({ name: 'global-style', ...styleOptions }, style);
Theme.setLoadedStyleName('common');
}

7
packages/themes/src/presets/material/index.js
View File

@ -177,5 +177,12 @@ export default {
directives: {
tooltip,
ripple
},
// @todo: REMOVE THIS BLOCK
style: ({ dt }) => `
.p-button {
background: blue !important;
padding: ${dt('inputtext.test')} ${dt('inputtext.test')} !important;
}
`
};

9
packages/themes/src/presets/material/inputtext/index.js
View File

@ -14,6 +14,7 @@ export default {
shadow: '{form.field.shadow}',
paddingX: '{form.field.padding.x}',
paddingY: '{form.field.padding.y}',
test: '2rem', // @todo: REMOVE THIS LINE
borderRadius: '{form.field.border.radius}',
focusRing: {
width: '{form.field.focus.ring.width}',
@ -33,5 +34,13 @@ export default {
paddingX: '0.875rem',
paddingY: '0.625rem'
}
},
// @todo: REMOVE THIS BLOCK
style: ({ dt }) => `
.p-inputtext {
background: yellow;
padding: ${dt('inputtext.test')} ${dt('inputtext.test')};
border: 5px solid red;
}
`
};