diff --git a/components/lib/base/style/BaseStyle.js b/components/lib/base/style/BaseStyle.js
index 06bb2d87a..ed4cd6ce8 100644
--- a/components/lib/base/style/BaseStyle.js
+++ b/components/lib/base/style/BaseStyle.js
@@ -1,4 +1,4 @@
-import { SharedUtils, dt, toVariables } from 'primevue/themes';
+import BaseThemeStyle from 'primevue/basetheme/style';
import { useStyle } from 'primevue/usestyle';
import { ObjectUtils } from 'primevue/utils';
@@ -40,14 +40,14 @@ export default {
loadTheme(theme, options = {}) {
return theme ? useStyle(ObjectUtils.minifyCSS(theme), { name: `${this.name}-style`, ...options }) : {};
},
- getGlobalThemeCSS(presetTheme, baseTheme, params, globalTheme) {
- return BaseThemeStyle.getGlobalThemeCSS(this.name, presetTheme, baseTheme, params, globalTheme);
+ getCommonThemeCSS(preset, base, params, theme) {
+ return BaseThemeStyle.getCommon(this.name, preset, base, params, theme);
},
- getPresetThemeCSS(presetCTheme, globalTheme) {
- return BaseThemeStyle.getPresetCThemeCSS(this.name, presetCTheme, globalTheme);
+ getPresetThemeCSS(presetCTheme, theme) {
+ return BaseThemeStyle.getPresetC(this.name, presetCTheme, theme);
},
- getBaseThemeCSS(baseCTheme, params, globalTheme) {
- return BaseThemeStyle.getBaseCThemeCSS(this.name, baseCTheme, params, globalTheme);
+ getBaseThemeCSS(baseCTheme, params, theme) {
+ return BaseThemeStyle.getBaseC(this.name, baseCTheme, params, theme);
},
getStyleSheet(extendedCSS = '', props = {}) {
if (this.css) {
@@ -61,137 +61,13 @@ export default {
return '';
},
- getThemeStyleSheet(globalTheme = {}, params, props = {}) {
- const { preset, base } = globalTheme;
- const presetCTheme = preset?.components?.[this.name];
- const baseCTheme = base?.components?.[this.name];
- const presetCThemeCSS = this.getPresetThemeCSS(presetCTheme, globalTheme);
- const baseCThemeCSS = this.getBaseThemeCSS(baseCTheme, params, globalTheme);
- const _props = Object.entries(props)
- .reduce((acc, [k, v]) => acc.push(`${k}="${v}"`) && acc, [])
- .join(' ');
-
- let css = [];
-
- presetCThemeCSS && css.push(``);
- baseCThemeCSS && css.push(``);
-
- return css.join('');
+ getCommonThemeStyleSheet(theme = {}, params, props = {}) {
+ return BaseThemeStyle.getCommonStyleSheet(this.name, theme, params, props);
},
- getGlobalThemeStyleSheet(globalTheme = {}, params, props = {}) {
- const { preset, base } = globalTheme;
- const globalThemeCSS = this.getGlobalThemeCSS(preset, base, params, globalTheme);
- const _props = Object.entries(props)
- .reduce((acc, [k, v]) => acc.push(`${k}="${v}"`) && acc, [])
- .join(' ');
-
- return Object.entries(globalThemeCSS || {})
- .reduce((acc, [key, value]) => {
- if (value) {
- const _css = ObjectUtils.minifyCSS(value);
-
- acc.push(``);
- }
-
- return acc;
- }, [])
- .join('');
+ getThemeStyleSheet(theme = {}, params, props = {}) {
+ return BaseThemeStyle.getStyleSheet(this.name, theme, params, props);
},
extend(style) {
return { ...this, css: undefined, ...style };
}
};
-
-// @todo - Create new file for it.
-const BaseThemeStyle = {
- getGlobalThemeCSS(name, presetTheme, baseTheme, params, globalTheme) {
- let primitive_css, semantic_css, global_css;
-
- if (ObjectUtils.isNotEmpty(presetTheme)) {
- const { options } = globalTheme;
- const { primitive, semantic } = presetTheme;
- const { colorScheme, ...sRest } = semantic || {};
- const { dark, ...csRest } = colorScheme || {};
- const prim_css = ObjectUtils.isNotEmpty(primitive) ? this._toVariables({ primitive }, options).declarations : '';
- const sRest_css = ObjectUtils.isNotEmpty(sRest) ? this._toVariables({ semantic: sRest }, options).declarations : '';
- const csRest_css = ObjectUtils.isNotEmpty(csRest) ? this._toVariables({ light: csRest }, options).declarations : '';
- const dark_css = ObjectUtils.isNotEmpty(dark) ? this._toVariables({ dark }, options).declarations : '';
-
- primitive_css = this._transformCSS(name, prim_css, 'light', 'variable', options);
- semantic_css = `${this._transformCSS(name, `${sRest_css}${csRest_css}color-scheme:light`, 'light', 'variable', options)}${this._transformCSS(name, `${dark_css}color-scheme:dark`, 'dark', 'variable', options)}`;
- }
-
- global_css = ObjectUtils.getItemValue(baseTheme?.components?.global?.css, { ...params, dt: (tokenPath) => dt(globalTheme, tokenPath) });
-
- return {
- primitive: primitive_css,
- semantic: semantic_css,
- global: global_css
- };
- },
- getPresetCThemeCSS(name, presetCTheme = {}, globalTheme) {
- const { options } = globalTheme;
- const { colorScheme, ...vRest } = presetCTheme;
- const { dark, ...csRest } = colorScheme || {};
- const vRest_css = ObjectUtils.isNotEmpty(vRest) ? this._toVariables({ [name]: vRest }, options).declarations : '';
- const csRest_css = ObjectUtils.isNotEmpty(csRest) ? this._toVariables({ [name]: csRest }, options).declarations : '';
- const dark_css = ObjectUtils.isNotEmpty(dark) ? this._toVariables({ [name]: dark }, options).declarations : '';
-
- return `${this._transformCSS(name, `${vRest_css}${csRest_css}`, 'light', 'variable', options)}${this._transformCSS(name, dark_css, 'dark', 'variable', options)}`;
- },
- getBaseCThemeCSS(name, baseCTheme = {}, params, globalTheme) {
- const { options } = globalTheme;
- const { css } = baseCTheme;
- const computed_css = ObjectUtils.getItemValue(css, { ...params, dt: (tokenPath) => dt(globalTheme, tokenPath) });
-
- return this._transformCSS(name, computed_css, undefined, 'style', options);
- },
- _toVariables(theme, options) {
- return toVariables(theme, { prefix: options?.prefix });
- },
- _transformCSS(name, css, mode, type, options = {}) {
- const { layer, colorScheme } = options;
-
- if (type !== 'style') {
- let colorSchemeOption = {
- light: {
- class: '',
- rule: `:root{[CSS]}`,
- default: false
- },
- dark: {
- class: 'p-dark',
- rule: `.p-dark{[CSS]}`,
- default: false
- }
- };
-
- if (colorScheme) {
- if (ObjectUtils.isObject(colorScheme)) {
- colorSchemeOption.light = { ...colorSchemeOption.light, ...colorScheme.light };
- colorSchemeOption.dark = { ...colorSchemeOption.dark, ...colorScheme.dark };
- } else {
- colorSchemeOption.light = { ...colorSchemeOption.light, default: colorScheme !== 'auto' && colorScheme !== 'dark' };
- colorSchemeOption.dark = { ...colorSchemeOption.dark, default: colorScheme === 'dark' };
- }
- }
-
- mode = mode === 'dark' ? 'dark' : 'light';
- css = colorSchemeOption[mode]?.rule?.replace('[CSS]', css);
- }
-
- if (layer) {
- let layerOptions = {
- name: 'primevue'
- //order: '@layer'
- };
-
- const _layer = ObjectUtils.isObject(layer) ? layer.name : layer;
-
- layerOptions.name = ObjectUtils.getItemValue(_layer, { name, type });
- css = ObjectUtils.isNotEmpty(layerOptions.name) ? SharedUtils.object.getRule(`@layer ${layerOptions.name}`, css) : css;
- }
-
- return css;
- }
-};
diff --git a/components/lib/basecomponent/BaseComponent.vue b/components/lib/basecomponent/BaseComponent.vue
index 5a695f329..3f787e2c7 100644
--- a/components/lib/basecomponent/BaseComponent.vue
+++ b/components/lib/basecomponent/BaseComponent.vue
@@ -40,7 +40,7 @@ export default {
deep: true,
immediate: true,
handler(newValue) {
- const { primitive, semantic, global } = this.$style?.getGlobalThemeCSS(newValue, this.$globalBaseTheme, this.$themeParams, this.$globalTheme);
+ const { primitive, semantic, global } = this.$style?.getCommonThemeCSS(newValue, this.$globalBaseTheme, this.$themeParams, this.$globalTheme);
BaseStyle.loadTheme(primitive, { name: 'primitive-variables', useStyleOptions: this.$styleOptions });
BaseStyle.loadTheme(semantic, { name: 'semantic-variables', useStyleOptions: this.$styleOptions });
diff --git a/components/lib/basetheme/BaseTheme.js b/components/lib/basetheme/BaseTheme.js
new file mode 100644
index 000000000..ff8b4c563
--- /dev/null
+++ b/components/lib/basetheme/BaseTheme.js
@@ -0,0 +1 @@
+export default {};
diff --git a/components/lib/basetheme/package.json b/components/lib/basetheme/package.json
new file mode 100644
index 000000000..75eccef0d
--- /dev/null
+++ b/components/lib/basetheme/package.json
@@ -0,0 +1,5 @@
+{
+ "main": "./basetheme.cjs.js",
+ "module": "./basetheme.esm.js",
+ "unpkg": "./basetheme.min.js"
+}
diff --git a/components/lib/basetheme/style/BaseThemeStyle.d.ts b/components/lib/basetheme/style/BaseThemeStyle.d.ts
new file mode 100644
index 000000000..1230b6256
--- /dev/null
+++ b/components/lib/basetheme/style/BaseThemeStyle.d.ts
@@ -0,0 +1 @@
+export declare interface BaseThemeStyle {}
diff --git a/components/lib/basetheme/style/BaseThemeStyle.js b/components/lib/basetheme/style/BaseThemeStyle.js
new file mode 100644
index 000000000..a1dfbd4d6
--- /dev/null
+++ b/components/lib/basetheme/style/BaseThemeStyle.js
@@ -0,0 +1,131 @@
+import { SharedUtils, dt, toVariables } from 'primevue/themes';
+import { ObjectUtils } from 'primevue/utils';
+
+export default {
+ getCommon(name, preset, base, params, theme) {
+ let primitive_css, semantic_css, global_css;
+
+ if (ObjectUtils.isNotEmpty(preset)) {
+ const { options } = theme;
+ const { primitive, semantic } = preset;
+ const { colorScheme, ...sRest } = semantic || {};
+ const { dark, ...csRest } = colorScheme || {};
+ const prim_css = ObjectUtils.isNotEmpty(primitive) ? this._toVariables({ primitive }, options).declarations : '';
+ const sRest_css = ObjectUtils.isNotEmpty(sRest) ? this._toVariables({ semantic: sRest }, options).declarations : '';
+ const csRest_css = ObjectUtils.isNotEmpty(csRest) ? this._toVariables({ light: csRest }, options).declarations : '';
+ const dark_css = ObjectUtils.isNotEmpty(dark) ? this._toVariables({ dark }, options).declarations : '';
+
+ primitive_css = this._transformCSS(name, prim_css, 'light', 'variable', options);
+ semantic_css = `${this._transformCSS(name, `${sRest_css}${csRest_css}color-scheme:light`, 'light', 'variable', options)}${this._transformCSS(name, `${dark_css}color-scheme:dark`, 'dark', 'variable', options)}`;
+ }
+
+ global_css = ObjectUtils.getItemValue(base?.components?.global?.css, { ...params, dt: (tokenPath) => dt(theme, tokenPath) });
+
+ return {
+ primitive: primitive_css,
+ semantic: semantic_css,
+ global: global_css
+ };
+ },
+ getPresetC(name, presetCTheme = {}, theme) {
+ const { options } = theme;
+ const { colorScheme, ...vRest } = presetCTheme;
+ const { dark, ...csRest } = colorScheme || {};
+ const vRest_css = ObjectUtils.isNotEmpty(vRest) ? this._toVariables({ [name]: vRest }, options).declarations : '';
+ const csRest_css = ObjectUtils.isNotEmpty(csRest) ? this._toVariables({ [name]: csRest }, options).declarations : '';
+ const dark_css = ObjectUtils.isNotEmpty(dark) ? this._toVariables({ [name]: dark }, options).declarations : '';
+
+ return `${this._transformCSS(name, `${vRest_css}${csRest_css}`, 'light', 'variable', options)}${this._transformCSS(name, dark_css, 'dark', 'variable', options)}`;
+ },
+ getBaseC(name, baseCTheme = {}, params, theme) {
+ const { options } = theme;
+ const { css } = baseCTheme;
+ const computed_css = ObjectUtils.getItemValue(css, { ...params, dt: (tokenPath) => dt(theme, tokenPath) });
+
+ return this._transformCSS(name, computed_css, undefined, 'style', options);
+ },
+ getCommonStyleSheet(name, theme = {}, params, props = {}) {
+ const { preset, base } = theme;
+ const common_css = this.getCommon(preset, base, params, theme);
+ const _props = Object.entries(props)
+ .reduce((acc, [k, v]) => acc.push(`${k}="${v}"`) && acc, [])
+ .join(' ');
+
+ return Object.entries(common_css || {})
+ .reduce((acc, [key, value]) => {
+ if (value) {
+ const _css = ObjectUtils.minifyCSS(value);
+
+ acc.push(``);
+ }
+
+ return acc;
+ }, [])
+ .join('');
+ },
+ getStyleSheet(name, theme = {}, params, props = {}) {
+ const { preset, base } = theme;
+ const presetCTheme = preset?.components?.[name];
+ const baseCTheme = base?.components?.[name];
+ const presetC_css = this.getPresetC(name, presetCTheme, theme);
+ const baseC_css = this.getBaseC(name, baseCTheme, params, theme);
+ 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('');
+ },
+ _toVariables(theme, options) {
+ return toVariables(theme, { prefix: options?.prefix });
+ },
+ _transformCSS(name, css, mode, type, options = {}) {
+ const { layer, colorScheme } = options;
+
+ if (type !== 'style') {
+ let colorSchemeOption = {
+ light: {
+ class: '',
+ rule: `:root{[CSS]}`,
+ default: false
+ },
+ dark: {
+ class: 'p-dark',
+ rule: `.p-dark{[CSS]}`,
+ default: false
+ }
+ };
+
+ if (colorScheme) {
+ if (ObjectUtils.isObject(colorScheme)) {
+ colorSchemeOption.light = { ...colorSchemeOption.light, ...colorScheme.light };
+ colorSchemeOption.dark = { ...colorSchemeOption.dark, ...colorScheme.dark };
+ } else {
+ colorSchemeOption.light = { ...colorSchemeOption.light, default: colorScheme !== 'auto' && colorScheme !== 'dark' };
+ colorSchemeOption.dark = { ...colorSchemeOption.dark, default: colorScheme === 'dark' };
+ }
+ }
+
+ mode = mode === 'dark' ? 'dark' : 'light';
+ css = colorSchemeOption[mode]?.rule?.replace('[CSS]', css);
+ }
+
+ if (layer) {
+ let layerOptions = {
+ name: 'primevue'
+ //order: '@layer'
+ };
+
+ const _layer = ObjectUtils.isObject(layer) ? layer.name : layer;
+
+ layerOptions.name = ObjectUtils.getItemValue(_layer, { name, type });
+ css = ObjectUtils.isNotEmpty(layerOptions.name) ? SharedUtils.object.getRule(`@layer ${layerOptions.name}`, css) : css;
+ }
+
+ return css;
+ }
+};
diff --git a/components/lib/basetheme/style/package.json b/components/lib/basetheme/style/package.json
new file mode 100644
index 000000000..2191e2651
--- /dev/null
+++ b/components/lib/basetheme/style/package.json
@@ -0,0 +1,6 @@
+{
+ "main": "./basethemestyle.cjs.js",
+ "module": "./basethemestyle.esm.js",
+ "unpkg": "./basethemestyle.min.js",
+ "types": "./BaseThemeStyle.d.ts"
+}
diff --git a/modules/nuxt-primevue/module.js b/modules/nuxt-primevue/module.js
index aec7eeea7..173fc3a01 100644
--- a/modules/nuxt-primevue/module.js
+++ b/modules/nuxt-primevue/module.js
@@ -62,7 +62,7 @@ const styles = [
].join('');
const themes = [
- ${importTheme ? `${registered.styles[0].as} && ${registered.styles[0].as}.getGlobalThemeStyleSheet ? ${registered.styles[0].as}.getGlobalThemeStyleSheet(${importTheme?.as}, undefined, styleProps) : ''` : ''},
+ ${importTheme ? `${registered.styles[0].as} && ${registered.styles[0].as}.getCommonThemeStyleSheet ? ${registered.styles[0].as}.getCommonThemeStyleSheet(${importTheme?.as}, undefined, styleProps) : ''` : ''},
${importTheme ? registered.styles.map((item) => `${item.as} && ${item.as}.getThemeStyleSheet ? ${item.as}.getThemeStyleSheet(${importTheme?.as}, undefined, styleProps) : ''`).join(',') : ''}
].join('');
diff --git a/nuxt-vite.config.js b/nuxt-vite.config.js
index bc33ef5d8..ae9510525 100644
--- a/nuxt-vite.config.js
+++ b/nuxt-vite.config.js
@@ -4,6 +4,7 @@ import path from 'path';
const STYLE_ALIAS = {
'primevue/base/style': path.resolve(__dirname, './components/lib/base/style/BaseStyle.js'),
+ 'primevue/basetheme/style': path.resolve(__dirname, './components/lib/basetheme/style/BaseThemeStyle.js'),
'primevue/basecomponent/style': path.resolve(__dirname, './components/lib/basecomponent/style/BaseComponentStyle.js'),
'primevue/accordion/style': path.resolve(__dirname, './components/lib/accordion/style/AccordionStyle.js'),
'primevue/accordiontab/style': path.resolve(__dirname, './components/lib/accordiontab/style/AccordionTabStyle.js'),
@@ -270,6 +271,7 @@ export default {
...STYLE_ALIAS,
...THEME_ALIAS,
'primevue/base': path.resolve(__dirname, './components/lib/base/Base.js'),
+ 'primevue/basetheme': path.resolve(__dirname, './components/lib/basetheme/BaseTheme.js'),
'primevue/basedirective': path.resolve(__dirname, './components/lib/basedirective/BaseDirective.js'),
'primevue/ripple': path.resolve(__dirname, './components/lib/ripple/Ripple.js'),
'primevue/tooltip': path.resolve(__dirname, './components/lib/tooltip/Tooltip.js'),