diff --git a/components/lib/base/style/BaseStyle.d.ts b/components/lib/base/style/BaseStyle.d.ts
index 517098ad7..d39b243a0 100644
--- a/components/lib/base/style/BaseStyle.d.ts
+++ b/components/lib/base/style/BaseStyle.d.ts
@@ -5,6 +5,6 @@ export declare interface BaseStyle {
css?: string | undefined;
classes?: object | undefined;
inlineStyles?: object | undefined;
- loadStyle?: ((options?: StyleOptions) => Style | object | undefined) | undefined;
+ load?: ((style: string | ((params?: any) => string | undefined), options?: StyleOptions) => Style | object | undefined) | undefined;
getStyleSheet?: ((extendedCSS?: string, props?: any) => string | undefined) | undefined;
}
diff --git a/components/lib/base/style/BaseStyle.js b/components/lib/base/style/BaseStyle.js
index 1c40a2641..1d122fd21 100644
--- a/components/lib/base/style/BaseStyle.js
+++ b/components/lib/base/style/BaseStyle.js
@@ -264,20 +264,16 @@ export default {
theme,
classes,
inlineStyles,
- loadStyle(options = {}) {
- const css = ObjectUtils.getItemValue(this.css, { dt });
+ load(style, options = {}, transform = (cs) => cs) {
+ const computedStyle = transform(ObjectUtils.getItemValue(style, { dt }));
- return css ? useStyle(ObjectUtils.minifyCSS(css), { name: this.name, ...options }) : {};
+ return computedStyle ? useStyle(ObjectUtils.minifyCSS(computedStyle), { name: this.name, ...options }) : {};
},
- loadInlineTheme(options = {}) {
- const theme = ObjectUtils.getItemValue(this.theme, { dt });
-
- return theme ? useStyle(ObjectUtils.minifyCSS(theme), { name: this.name, ...options }) : {};
+ loadCSS(options = {}) {
+ return this.load(this.css, options);
},
- loadTheme(theme, options = {}) {
- const callbacks = { onMounted: (name) => Theme.onStyleMounted(name), onUpdated: (name) => Theme.onStyleUpdated(name), onLoad: (event, options) => Theme.onStyleLoaded(event, options) };
-
- return theme ? useStyle(ObjectUtils.minifyCSS(theme), { name: this.name, ...options, ...callbacks }) : {};
+ loadTheme(options = {}) {
+ return this.load(this.theme, options, (computedStyle) => Theme.transformCSS(options.name || this.name, computedStyle));
},
getCommonThemeCSS(params) {
return Theme.getCommonCSS(this.name, params);
@@ -296,12 +292,13 @@ export default {
},
getStyleSheet(extendedCSS = '', props = {}) {
if (this.css) {
- const _css = ObjectUtils.minifyCSS(`${this.css}${extendedCSS}`);
+ const _css = ObjectUtils.getItemValue(this.css, { dt });
+ const _style = ObjectUtils.minifyCSS(`${_css}${extendedCSS}`);
const _props = Object.entries(props)
.reduce((acc, [k, v]) => acc.push(`${k}="${v}"`) && acc, [])
.join(' ');
- return ``;
+ return ``;
}
return '';
@@ -310,7 +307,20 @@ export default {
return Theme.getCommonStyleSheet(this.name, params, props);
},
getThemeStyleSheet(params, props = {}) {
- return Theme.getStyleSheet(this.name, params, props);
+ let css = [Theme.getStyleSheet(this.name, params, props)];
+
+ if (this.theme) {
+ const name = `${this.name}-style`;
+ const _css = ObjectUtils.getItemValue(this.theme, { dt });
+ const _style = ObjectUtils.minifyCSS(Theme.transformCSS(name, _css));
+ const _props = Object.entries(props)
+ .reduce((acc, [k, v]) => acc.push(`${k}="${v}"`) && acc, [])
+ .join(' ');
+
+ css.push(``);
+ }
+
+ return css.join('');
},
extend(style) {
return { ...this, css: undefined, theme: undefined, ...style };
diff --git a/components/lib/basecomponent/BaseComponent.vue b/components/lib/basecomponent/BaseComponent.vue
index 8902a2a02..3b021489e 100644
--- a/components/lib/basecomponent/BaseComponent.vue
+++ b/components/lib/basecomponent/BaseComponent.vue
@@ -38,9 +38,6 @@ export default {
if (!newValue) {
this._loadCoreStyles();
this._themeChangeListener(this._loadCoreStyles); // update styles with theme settings
- } else {
- // load theme
- this._loadThemeStyles();
}
}
},
@@ -114,7 +111,7 @@ export default {
const _load = () => {
// @todo
if (!Base.isStyleNameLoaded('base')) {
- BaseStyle.loadStyle(this.$styleOptions);
+ BaseStyle.loadCSS(this.$styleOptions);
this._loadGlobalStyles();
Base.setLoadedStyleName('base');
@@ -128,8 +125,8 @@ export default {
},
_loadCoreStyles() {
if (!Base.isStyleNameLoaded(this.$style?.name) && this.$style?.name) {
- BaseComponentStyle.loadStyle(this.$styleOptions);
- this.$options.style && this.$style.loadStyle(this.$styleOptions);
+ BaseComponentStyle.loadCSS(this.$styleOptions);
+ this.$options.style && this.$style.loadCSS(this.$styleOptions);
Base.setLoadedStyleName(this.$style.name);
}
@@ -147,7 +144,7 @@ export default {
const globalCSS = this._useGlobalPT(this._getOptionValue, 'global.css', this.$params);
- ObjectUtils.isNotEmpty(globalCSS) && BaseStyle.loadStyle(globalCSS, { name: 'global', ...this.$styleOptions });
+ ObjectUtils.isNotEmpty(globalCSS) && BaseStyle.load(globalCSS, { name: 'global', ...this.$styleOptions });
},
_loadThemeStyles() {
if (this.isUnstyled) return;
@@ -156,21 +153,19 @@ export default {
if (!Theme.isStyleNameLoaded('common')) {
const { primitive, semantic } = this.$style?.getCommonThemeCSS?.() || {};
- BaseStyle.loadTheme(primitive, { name: 'primitive-variables', ...this.$styleOptions });
- BaseStyle.loadTheme(semantic, { name: 'semantic-variables', ...this.$styleOptions });
- BaseStyle.loadInlineTheme({ name: 'global-style', ...this.$styleOptions });
+ BaseStyle.load(primitive, { name: 'primitive-variables', ...this.$styleOptions });
+ BaseStyle.load(semantic, { name: 'semantic-variables', ...this.$styleOptions });
+ BaseStyle.loadTheme({ name: 'global-style', ...this.$styleOptions });
Theme.setLoadedStyleName('common');
}
// component
if (!Theme.isStyleNameLoaded(this.$style?.name) && this.$style?.name) {
- const { variables, style } = this.$style?.getComponentThemeCSS?.() || {};
+ const { variables } = this.$style?.getComponentThemeCSS?.() || {};
- this.$style?.loadTheme(variables, { name: `${this.$style.name}-variables`, ...this.$styleOptions });
- this.$style?.loadInlineTheme({ name: `${this.$style.name}-style`, ...this.$styleOptions });
-
- //this.$style?.loadTheme(style, { name: `${this.$style.name}-style`, ...this.$styleOptions });
+ this.$style?.load(variables, { name: `${this.$style.name}-variables`, ...this.$styleOptions });
+ this.$style?.loadTheme({ name: `${this.$style.name}-style`, ...this.$styleOptions });
Theme.setLoadedStyleName(this.$style.name);
}
@@ -179,14 +174,14 @@ export default {
if (!Theme.isStyleNameLoaded('layer-order')) {
const layerOrder = this.$style?.getLayerOrderThemeCSS?.();
- BaseStyle.loadTheme(layerOrder, { name: 'layer-order', first: true, ...this.$styleOptions });
+ BaseStyle.load(layerOrder, { name: 'layer-order', first: true, ...this.$styleOptions });
Theme.setLoadedStyleName('layer-order');
}
},
_loadScopedThemeStyles(preset) {
- const variables = this.$style?.getPresetThemeCSS?.(preset, `[${this.$attrSelector}]`) || {};
- const scopedStyle = this.$style?.loadTheme(variables, { name: `${this.$attrSelector}-${this.$style.name}`, ...this.$styleOptions });
+ const { variables } = this.$style?.getPresetThemeCSS?.(preset, `[${this.$attrSelector}]`) || {};
+ const scopedStyle = this.$style?.load(variables, { name: `${this.$attrSelector}-${this.$style.name}`, ...this.$styleOptions });
this.scopedStyleEl = scopedStyle.el;
},
@@ -325,7 +320,7 @@ export default {
return this.$config?.theme;
},
$style() {
- return { classes: undefined, inlineStyles: undefined, loadStyle: () => {}, loadCustomStyle: () => {}, loadTheme: () => {}, ...(this._getHostInstance(this) || {}).$style, ...this.$options.style };
+ return { classes: undefined, inlineStyles: undefined, load: () => {}, loadCSS: () => {}, loadTheme: () => {}, ...(this._getHostInstance(this) || {}).$style, ...this.$options.style };
},
$styleOptions() {
return { nonce: this.$config?.csp?.nonce };
diff --git a/components/lib/basedirective/BaseDirective.js b/components/lib/basedirective/BaseDirective.js
index 4822845a5..a31b125f9 100644
--- a/components/lib/basedirective/BaseDirective.js
+++ b/components/lib/basedirective/BaseDirective.js
@@ -87,8 +87,8 @@ const BaseDirective = {
},
_loadCoreStyles(instance = {}, useStyleOptions) {
if (!Base.isStyleNameLoaded(instance.$style?.name) && instance.$style?.name) {
- BaseStyle.loadStyle(useStyleOptions);
- instance.isUnstyled() && instance.$style?.loadStyle(useStyleOptions);
+ BaseStyle.loadCSS(useStyleOptions);
+ instance.isUnstyled() && instance.$style?.loadCSS(useStyleOptions);
Base.setLoadedStyleName(instance.$style.name);
}
@@ -100,20 +100,19 @@ const BaseDirective = {
if (!Theme.isStyleNameLoaded('common')) {
const { primitive, semantic } = instance.$style?.getCommonThemeCSS?.() || {};
- BaseStyle.loadTheme(primitive, { name: 'primitive-variables', ...useStyleOptions });
- BaseStyle.loadTheme(semantic, { name: 'semantic-variables', ...useStyleOptions });
- BaseStyle.loadInlineTheme({ name: 'global-style', ...useStyleOptions });
+ BaseStyle.load(primitive, { name: 'primitive-variables', ...useStyleOptions });
+ BaseStyle.load(semantic, { name: 'semantic-variables', ...useStyleOptions });
+ BaseStyle.loadTheme({ name: 'global-style', ...useStyleOptions });
Theme.setLoadedStyleName('common');
}
// directive
if (!Theme.isStyleNameLoaded(instance.$style?.name) && instance.$style?.name) {
- const { variables, style } = instance.$style?.getDirectiveThemeCSS?.() || {};
+ const { variables } = instance.$style?.getDirectiveThemeCSS?.() || {};
- instance.$style?.loadTheme(variables, { name: `${instance.$style.name}-variables`, ...useStyleOptions });
- instance.$style?.loadInlineTheme({ name: `${instance.$style.name}-style`, ...useStyleOptions });
- //instance.$style?.loadTheme(style, { name: `${instance.$style.name}-style`, ...useStyleOptions });
+ instance.$style?.load(variables, { name: `${instance.$style.name}-variables`, ...useStyleOptions });
+ instance.$style?.loadTheme({ name: `${instance.$style.name}-style`, ...useStyleOptions });
Theme.setLoadedStyleName(instance.$style.name);
}
@@ -122,7 +121,7 @@ const BaseDirective = {
if (!Theme.isStyleNameLoaded('layer-order')) {
const layerOrder = instance.$style?.getLayerOrderThemeCSS?.();
- BaseStyle.loadTheme(layerOrder, { name: 'layer-order', first: true, ...useStyleOptions });
+ BaseStyle.load(layerOrder, { name: 'layer-order', first: true, ...useStyleOptions });
Theme.setLoadedStyleName('layer-order');
}
@@ -131,8 +130,8 @@ const BaseDirective = {
const preset = instance.preset();
if (preset && instance.$attrSelector) {
- const variables = instance.$style?.getPresetThemeCSS?.(preset, `[${instance.$attrSelector}]`) || {};
- const scopedStyle = instance.$style?.loadTheme(variables, { name: `${instance.$attrSelector}-${instance.$style.name}`, ...useStyleOptions });
+ const { variables } = instance.$style?.getPresetThemeCSS?.(preset, `[${instance.$attrSelector}]`) || {};
+ const scopedStyle = instance.$style?.load(variables, { name: `${instance.$attrSelector}-${instance.$style.name}`, ...useStyleOptions });
instance.scopedStyleEl = scopedStyle.el;
}
@@ -172,7 +171,7 @@ const BaseDirective = {
$modifiers: binding?.modifiers,
$value: binding?.value,
$el: $prevInstance['$el'] || el || undefined,
- $style: { classes: undefined, inlineStyles: undefined, loadStyle: () => {}, loadTheme: () => {}, ...options?.style },
+ $style: { classes: undefined, inlineStyles: undefined, load: () => {}, loadCSS: () => {}, loadTheme: () => {}, ...options?.style },
$config: config,
$attrSelector: el.$attrSelector,
/* computed instance variables */
diff --git a/components/lib/editor/BaseEditor.vue b/components/lib/editor/BaseEditor.vue
index d680faa12..bc8810bf6 100644
--- a/components/lib/editor/BaseEditor.vue
+++ b/components/lib/editor/BaseEditor.vue
@@ -19,9 +19,6 @@ export default {
$pcEditor: this,
$parentInstance: this
};
- },
- beforeMount() {
- EditorStyle.loadStyle({ nonce: this.$primevue?.config?.csp?.nonce });
}
};
diff --git a/components/lib/themes/config/index.js b/components/lib/themes/config/index.js
index d888e3ca9..87d9977f6 100644
--- a/components/lib/themes/config/index.js
+++ b/components/lib/themes/config/index.js
@@ -36,9 +36,6 @@ export default {
get theme() {
return this._theme;
},
- get base() {
- return this.theme?.base || {};
- },
get preset() {
return this.theme?.preset || {};
},
@@ -97,7 +94,6 @@ export default {
const options = { name, theme: this.theme, params, defaults: this.defaults, set: { layerNames: this.setLayerNames.bind(this) } };
return {
- style: ThemeUtils.getBaseC(options),
variables: ThemeUtils.getPresetC(options)
};
},
@@ -105,18 +101,22 @@ export default {
const options = { name, theme: this.theme, params, defaults: this.defaults, set: { layerNames: this.setLayerNames.bind(this) } };
return {
- style: ThemeUtils.getBaseD(options),
variables: ThemeUtils.getPresetD(options)
};
},
getPresetCSS(name = '', preset, selector, params) {
const options = { name, preset, options: this.options, selector, params, defaults: this.defaults, set: { layerNames: this.setLayerNames.bind(this) } };
- return ThemeUtils.getPreset(options);
+ return {
+ variables: ThemeUtils.getPreset(options)
+ };
},
getLayerOrderCSS(name = '') {
return ThemeUtils.getLayerOrder(name, this.options, { names: this.getLayerNames() }, this.defaults);
},
+ transformCSS(name = '', css, type = 'style', mode) {
+ return ThemeUtils.transformCSS(name, css, mode, type, this.options, { layerNames: this.setLayerNames.bind(this) }, this.defaults);
+ },
getCommonStyleSheet(name = '', params, props = {}) {
return ThemeUtils.getCommonStyleSheet({ name, theme: this.theme, params, props, defaults: this.defaults, set: { layerNames: this.setLayerNames.bind(this) } });
},
diff --git a/components/lib/themes/utils/themeUtils.js b/components/lib/themes/utils/themeUtils.js
index 7e102cc56..483516d12 100644
--- a/components/lib/themes/utils/themeUtils.js
+++ b/components/lib/themes/utils/themeUtils.js
@@ -1,4 +1,4 @@
-import { SharedUtils, dtwt, toVariables } from 'primevue/themes';
+import { SharedUtils, toVariables } from 'primevue/themes';
export default {
regex: {
@@ -41,9 +41,12 @@ export default {
return [value].flat().map((v) => rules.map((r) => r.resolve(v)).find((rr) => rr.matched) ?? this.rules.custom.resolve(v));
}
},
+ _toVariables(theme, options) {
+ return toVariables(theme, { prefix: options?.prefix });
+ },
getCommon({ name = '', theme = {}, params, set, defaults }) {
- const { base, preset, options } = theme;
- let primitive_css, semantic_css, global_css;
+ const { preset, options } = theme;
+ let primitive_css, semantic_css;
if (SharedUtils.object.isNotEmpty(preset)) {
const { primitive, semantic } = preset;
@@ -54,21 +57,17 @@ export default {
const csRest_css = SharedUtils.object.isNotEmpty(csRest) ? this._toVariables({ light: csRest }, options).declarations : '';
const dark_css = SharedUtils.object.isNotEmpty(dark) ? this._toVariables({ dark }, options).declarations : '';
- primitive_css = this._transformCSS(name, prim_css, 'light', 'variable', options, set, defaults);
+ primitive_css = this.transformCSS(name, prim_css, 'light', 'variable', options, set, defaults);
- const semantic_light_css = this._transformCSS(name, `${sRest_css}${csRest_css}color-scheme:light`, 'light', 'variable', options, set, defaults);
- const semantic_dark_css = this._transformCSS(name, `${dark_css}color-scheme:dark`, 'dark', 'variable', options, set, defaults);
+ const semantic_light_css = this.transformCSS(name, `${sRest_css}${csRest_css}color-scheme:light`, 'light', 'variable', options, set, defaults);
+ const semantic_dark_css = this.transformCSS(name, `${dark_css}color-scheme:dark`, 'dark', 'variable', options, set, defaults);
semantic_css = `${semantic_light_css}${semantic_dark_css}`;
}
- global_css = SharedUtils.object.getItemValue(base?.global?.css, { ...params, dt: (...args) => dtwt(theme, ...args) });
- global_css = this._transformCSS(name, global_css, undefined, 'style', options, set, defaults);
-
return {
primitive: primitive_css,
- semantic: semantic_css,
- global: global_css
+ semantic: semantic_css
};
},
getPreset({ name = '', preset = {}, options, params, set, defaults, selector }) {
@@ -79,8 +78,8 @@ export default {
const csRest_css = SharedUtils.object.isNotEmpty(csRest) ? this._toVariables({ [_name]: csRest }, options).declarations : '';
const dark_css = SharedUtils.object.isNotEmpty(dark) ? this._toVariables({ [_name]: dark }, options).declarations : '';
- const light_variable_css = this._transformCSS(_name, `${vRest_css}${csRest_css}`, 'light', 'variable', options, set, defaults, selector);
- const dark_variable_css = this._transformCSS(_name, dark_css, 'dark', 'variable', options, set, defaults, selector);
+ const light_variable_css = this.transformCSS(_name, `${vRest_css}${csRest_css}`, 'light', 'variable', options, set, defaults, selector);
+ const dark_variable_css = this.transformCSS(_name, dark_css, 'dark', 'variable', options, set, defaults, selector);
return `${light_variable_css}${dark_variable_css}`;
},
@@ -90,13 +89,6 @@ export default {
return this.getPreset({ name, preset: cPreset, options, params, set, defaults });
},
- getBaseC({ name = '', theme = {}, params, set, defaults }) {
- const { base, options } = theme;
- const { css } = base?.components?.[name] || {};
- const computed_css = SharedUtils.object.getItemValue(css, { ...params, dt: (...args) => dtwt(theme, ...args) });
-
- return this._transformCSS(name, computed_css, undefined, 'style', options, set, defaults);
- },
getPresetD({ name = '', theme = {}, params, set, defaults }) {
const dName = name.replace('-directive', '');
const { preset, options } = theme;
@@ -104,14 +96,6 @@ export default {
return this.getPreset({ name: dName, preset: dPreset, options, params, set, defaults });
},
- getBaseD({ name = '', theme = {}, params, set, defaults }) {
- const dName = name.replace('-directive', '');
- const { base, options } = theme;
- const { css } = base?.directives?.[dName] || {};
- const computed_css = SharedUtils.object.getItemValue(css, { ...params, dt: (...args) => dtwt(theme, ...args) });
-
- return this._transformCSS(dName, computed_css, undefined, 'style', options, set, defaults);
- },
getColorSchemeOption(options, defaults) {
return this.regex.resolve(options.darkModeSelector ?? defaults.options.darkModeSelector);
},
@@ -136,7 +120,7 @@ export default {
.reduce((acc, [key, value]) => {
if (value) {
const _css = SharedUtils.object.minifyCSS(value);
- const id = key === 'global' ? `${key}-style` : `${key}-variables`;
+ const id = `${key}-variables`;
acc.push(``);
}
@@ -147,17 +131,11 @@ export default {
},
getStyleSheet({ name = '', theme = {}, params, props = {}, set, defaults }) {
const presetC_css = this.getPresetC({ name, theme, params, set, defaults });
- const baseC_css = this.getBaseC({ name, theme, params, set, defaults });
const _props = Object.entries(props)
.reduce((acc, [k, v]) => acc.push(`${k}="${v}"`) && acc, [])
.join(' ');
- let css = [];
-
- presetC_css && css.push(``);
- baseC_css && css.push(``);
-
- return css.join('');
+ return presetC_css ? `` : '';
},
createTokens(obj = {}, defaults, parentKey = '', parentPath = '', tokens = {}) {
Object.entries(obj).forEach(([key, value]) => {
@@ -240,10 +218,7 @@ export default {
return acc;
}, undefined);
},
- _toVariables(theme, options) {
- return toVariables(theme, { prefix: options?.prefix });
- },
- _transformCSS(name, css, mode, type, options = {}, set, defaults, selector) {
+ transformCSS(name, css, mode, type, options = {}, set, defaults, selector) {
if (SharedUtils.object.isNotEmpty(css)) {
const { cssLayer } = options;
diff --git a/components/lib/virtualscroller/BaseVirtualScroller.vue b/components/lib/virtualscroller/BaseVirtualScroller.vue
index 342d5d300..e9e7e0fd8 100644
--- a/components/lib/virtualscroller/BaseVirtualScroller.vue
+++ b/components/lib/virtualscroller/BaseVirtualScroller.vue
@@ -95,7 +95,7 @@ export default {
};
},
beforeMount() {
- VirtualScrollerStyle.loadStyle({ nonce: this.$config?.csp?.nonce });
+ VirtualScrollerStyle.loadCSS({ nonce: this.$config?.csp?.nonce });
}
};