Added basetheme structure

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) {
+    getCommonThemeCSS(preset, base, params, theme) {
-        return BaseThemeStyle.getGlobalThemeCSS(this.name, presetTheme, baseTheme, params, globalTheme);
+        return BaseThemeStyle.getCommon(this.name, preset, base, params, theme);
     },
-    getPresetThemeCSS(presetCTheme, globalTheme) {
+    getPresetThemeCSS(presetCTheme, theme) {
-        return BaseThemeStyle.getPresetCThemeCSS(this.name, presetCTheme, globalTheme);
+        return BaseThemeStyle.getPresetC(this.name, presetCTheme, theme);
     },
-    getBaseThemeCSS(baseCTheme, params, globalTheme) {
+    getBaseThemeCSS(baseCTheme, params, theme) {
-        return BaseThemeStyle.getBaseCThemeCSS(this.name, baseCTheme, params, globalTheme);
+        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 = {}) {
+    getCommonThemeStyleSheet(theme = {}, params, props = {}) {
-        const { preset, base } = globalTheme;
+        return BaseThemeStyle.getCommonStyleSheet(this.name, theme, params, props);
-        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(`<style type="text/css" data-primevue-style-id="${this.name}-variables" ${_props}>${ObjectUtils.minifyCSS(presetCThemeCSS)}</style>`);
-        baseCThemeCSS && css.push(`<style type="text/css" data-primevue-style-id="${this.name}-style" ${_props}>${ObjectUtils.minifyCSS(baseCThemeCSS)}</style>`);
-
-        return css.join('');
     },
-    getGlobalThemeStyleSheet(globalTheme = {}, params, props = {}) {
+    getThemeStyleSheet(theme = {}, params, props = {}) {
-        const { preset, base } = globalTheme;
+        return BaseThemeStyle.getStyleSheet(this.name, theme, params, props);
-        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(`<style type="text/css" data-primevue-style-id="${key}" ${_props}>${_css}</style>`);
-                }
-
-                return acc;
-            }, [])
-            .join('');
     },
     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;
-    }
-};

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

components/lib/basetheme/BaseTheme.js

@@ -0,0 +1 @@
+export default {};

components/lib/basetheme/package.json

@@ -0,0 +1,5 @@
+{
+    "main": "./basetheme.cjs.js",
+    "module": "./basetheme.esm.js",
+    "unpkg": "./basetheme.min.js"
+}

components/lib/basetheme/style/BaseThemeStyle.d.ts

@@ -0,0 +1 @@
+export declare interface BaseThemeStyle {}

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(`<style type="text/css" data-primevue-style-id="${key}" ${_props}>${_css}</style>`);
+                }
+
+                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(`<style type="text/css" data-primevue-style-id="${name}-variables" ${_props}>${ObjectUtils.minifyCSS(presetC_css)}</style>`);
+        baseC_css && css.push(`<style type="text/css" data-primevue-style-id="${name}-style" ${_props}>${ObjectUtils.minifyCSS(baseC_css)}</style>`);
+
+        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;
+    }
+};

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"
+}

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('');
 

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'),