Theming API: update nuxt-primevue module

components/lib/base/style/BaseStyle.js

@@ -40,14 +40,14 @@ export default {
     loadTheme(theme, options = {}) {
         return theme ? useStyle(ObjectUtils.minifyCSS(theme), { name: `${this.name}-style`, ...options }) : {};
     },
-    getCommonThemeCSS(theme, params) {
+    getCommonThemeCSS(params) {
-        return Theme.getCommonCSS(this.name, theme, params);
+        return Theme.getCommonCSS(this.name, params);
     },
-    getComponentThemeCSS(theme, params) {
+    getComponentThemeCSS(params) {
-        return Theme.getComponentCSS(this.name, theme, params);
+        return Theme.getComponentCSS(this.name, params);
     },
-    getDirectiveThemeCSS(theme, params) {
+    getDirectiveThemeCSS(params) {
-        return Theme.getDirectiveCSS(this.name, theme, params);
+        return Theme.getDirectiveCSS(this.name, params);
     },
     getLayerOrderThemeCSS() {
         return Theme.getLayerOrderCSS(this.name);
@@ -64,11 +64,11 @@ export default {
 
         return '';
     },
-    getCommonThemeStyleSheet(theme = {}, params, props = {}) {
+    getCommonThemeStyleSheet(params, props = {}) {
-        return Theme.getCommonStyleSheet(this.name, theme, params, props);
+        return Theme.getCommonStyleSheet(this.name, params, props);
     },
-    getThemeStyleSheet(theme = {}, params, props = {}) {
+    getThemeStyleSheet(params, props = {}) {
-        return Theme.getStyleSheet(this.name, theme, params, props);
+        return Theme.getStyleSheet(this.name, params, props);
     },
     extend(style) {
         return { ...this, css: undefined, ...style };

components/lib/basecomponent/BaseComponent.vue

@@ -40,7 +40,8 @@ export default {
             deep: true,
             immediate: true,
             handler(newValue) {
-                this._loadThemeStyles(newValue);
+                Theme.setTheme(newValue);
+                this._loadThemeStyles();
             }
         }
     },
@@ -114,16 +115,16 @@ export default {
 
             ObjectUtils.isNotEmpty(globalCSS) && BaseComponentStyle.loadGlobalStyle(globalCSS, this.$styleOptions);
         },
-        _loadThemeStyles(theme) {
+        _loadThemeStyles() {
             // common
-            const { primitive, semantic, global } = this.$style?.getCommonThemeCSS?.(theme, this.$themeParams) || {};
+            const { primitive, semantic, global } = this.$style?.getCommonThemeCSS?.(this.$themeParams) || {};
 
             BaseStyle.loadTheme(primitive, { name: 'primitive-variables', ...this.$styleOptions });
             BaseStyle.loadTheme(semantic, { name: 'semantic-variables', ...this.$styleOptions });
             BaseComponentStyle.loadGlobalTheme(global, this.$styleOptions);
 
             // component
-            const { variables, style } = this.$style?.getComponentThemeCSS?.(theme, this.$themeParams) || {};
+            const { variables, style } = this.$style?.getComponentThemeCSS?.(this.$themeParams) || {};
 
             this.$style?.loadTheme(variables, { name: `${this.$style.name}-variables`, ...this.$styleOptions });
             this.$style?.loadTheme(style, this.$styleOptions);

components/lib/basedirective/BaseDirective.js

@@ -82,20 +82,21 @@ const BaseDirective = {
 
         // apply theme settings
         Theme.init();
+        Theme.setTheme(el.$instance?.theme());
         BaseDirective._loadThemeStyles(el.$instance, { nonce: config?.csp?.nonce });
     },
     _loadThemeStyles: (instance = {}, useStyleOptions) => {
-        const [theme, themeParams] = [instance.theme(), instance.themeParams()];
+        const themeParams = instance.themeParams();
 
         // common
-        const { primitive, semantic, global } = instance.$style?.getCommonThemeCSS?.(theme, themeParams) || {};
+        const { primitive, semantic, global } = instance.$style?.getCommonThemeCSS?.(themeParams) || {};
 
         BaseStyle.loadTheme(primitive, { name: 'primitive-variables', ...useStyleOptions });
         BaseStyle.loadTheme(semantic, { name: 'semantic-variables', ...useStyleOptions });
         BaseStyle.loadTheme(global, { name: 'global-style', ...useStyleOptions });
 
         // component
-        const { variables, style } = instance.$style?.getDirectiveThemeCSS?.(theme, themeParams) || {};
+        const { variables, style } = instance.$style?.getDirectiveThemeCSS?.(themeParams) || {};
 
         instance.$style?.loadTheme(variables, { name: `${instance.$name}-directive-variables`, ...useStyleOptions });
         instance.$style?.loadTheme(style, { name: `${instance.$name}-directive-style`, ...useStyleOptions });

components/lib/config/PrimeVue.js

@@ -141,15 +141,8 @@ export const defaultOptions = {
         preset: Aura,
         options: {
             prefix: 'p',
-            darkModeSelector: '.p-dark',
+            darkModeSelector: 'system',
             cssLayer: false
-            /*
-            darkModeSelector: '.p-dark | [data-p-dark="true"] | system(default)',
-            cssLayer: {
-                // cssLayer: true | false | undefined | object // default: undefined
-                name: '', // ({component_name, type=variable|style}) => layer_name // default: primevue
-                order: '' // ({layer_names}) => layer_order // default: @layer primevue
-            }*/
         }
     },
     pt: undefined,

components/lib/themes/config/index.js

@@ -83,19 +83,19 @@ export default {
     setLayerNames(layerName) {
         this._layerNames?.add(layerName);
     },
-    getCommonCSS(name = '', theme, params) {
+    getCommonCSS(name = '', params) {
-        return ThemeUtils.getCommon({ name, theme: theme || this.theme, params, defaults: this.defaults, set: { layerNames: this.setLayerNames.bind(this) } });
+        return ThemeUtils.getCommon({ name, theme: this.theme, params, defaults: this.defaults, set: { layerNames: this.setLayerNames.bind(this) } });
     },
-    getComponentCSS(name = '', theme, params) {
+    getComponentCSS(name = '', params) {
-        const options = { name, theme: theme || this.theme, params, defaults: this.defaults, set: { layerNames: this.setLayerNames.bind(this) } };
+        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)
         };
     },
-    getDirectiveCSS(name = '', theme, params) {
+    getDirectiveCSS(name = '', params) {
-        const options = { name, theme: theme || this.theme, params, defaults: this.defaults, set: { layerNames: this.setLayerNames.bind(this) } };
+        const options = { name, theme: this.theme, params, defaults: this.defaults, set: { layerNames: this.setLayerNames.bind(this) } };
 
         return {
             style: ThemeUtils.getBaseD(options),
@@ -105,10 +105,10 @@ export default {
     getLayerOrderCSS(name = '') {
         return ThemeUtils.getLayerOrder(name, this.options, { names: this.getLayerNames() }, this.defaults);
     },
-    getCommonStyleSheet(name = '', theme, params, props = {}) {
+    getCommonStyleSheet(name = '', params, props = {}) {
-        return ThemeUtils.getCommonStyleSheet({ name, theme, params, props, defaults: this.defaults, set: { layerNames: this.setLayerNames.bind(this) } });
+        return ThemeUtils.getCommonStyleSheet({ name, theme: this.theme, params, props, defaults: this.defaults, set: { layerNames: this.setLayerNames.bind(this) } });
     },
-    getStyleSheet(name, theme = {}, params, props = {}) {
+    getStyleSheet(name, params, props = {}) {
-        return ThemeUtils.getStyleSheet({ name, theme, params, props, defaults: this.defaults, set: { layerNames: this.setLayerNames.bind(this) } });
+        return ThemeUtils.getStyleSheet({ name, theme: this.theme, params, props, defaults: this.defaults, set: { layerNames: this.setLayerNames.bind(this) } });
     }
 };

components/lib/themes/helpers/dt.js

@@ -5,7 +5,7 @@ const types = ['value', 'variable'];
 export const $dt = (tokenPath, param1, param2) => {
     const config = Theme.getPConfig();
 
-    return types.includes(param1) ? dt(config?.theme, tokenPath, undefined, param2) : dt(config?.theme, tokenPath, param1, param2);
+    return types.includes(param1) ? dt(config?.theme, tokenPath, undefined, param1) : dt(config?.theme, tokenPath, param1, param2);
 };
 
 export const dt = (theme = {}, tokenPath, fallback, type = 'variable') => {

layouts/AppConfigurator.vue

@@ -94,13 +94,7 @@ export default {
             if (type === 'primary') this.selectedPrimaryColor = color.name;
             else if (type === 'surface') this.selectedSurfaceColor = color.name;
 
-            if (!document.startViewTransition) {
             this.applyTheme(type, color);
-
-                return;
-            }
-
-            document.startViewTransition(() => this.applyTheme(type, color));
         },
         applyTheme(type, color) {
             if (type === 'primary') {

modules/nuxt-primevue/module.js

@@ -51,7 +51,12 @@ export default defineNuxtModule({
 
         const styleContent = () => `
 ${registered.styles.map((style) => `import ${style.as} from '${style.from}';`).join('\n')}
-${importTheme ? `import ${importTheme.as} from '${importTheme.from}';\n` : ''}
+${
+    importTheme
+        ? `import Theme from 'primevue/themes';
+import ${importTheme.as} from '${importTheme.from}';\n`
+        : ''
+}
 
 const styleProps = {
     ${options?.csp?.nonce ? `nonce: ${options?.csp?.nonce}` : ''}
@@ -61,9 +66,11 @@ const styles = [
   ${registered.styles.map((item) => `${item.as} && ${item.as}.getStyleSheet ? ${item.as}.getStyleSheet(undefined, styleProps) : ''`).join(',')}
 ].join('');
 
+${importTheme ? `Theme.setTheme(${importTheme.as})` : ''}
+
 const themes = [
-    ${importTheme ? `${registered.styles[0].as} && ${registered.styles[0].as}.getCommonThemeStyleSheet ? ${registered.styles[0].as}.getCommonThemeStyleSheet(${importTheme?.as}, undefined, styleProps) : ''` : ''},
+    ${importTheme ? `${registered.styles[0].as} && ${registered.styles[0].as}.getCommonThemeStyleSheet ? ${registered.styles[0].as}.getCommonThemeStyleSheet(undefined, styleProps) : ''` : ''},
-    ${importTheme ? registered.styles.map((item) => `${item.as} && ${item.as}.getThemeStyleSheet ? ${item.as}.getThemeStyleSheet(${importTheme?.as}, undefined, styleProps) : ''`).join(',') : ''}
+    ${importTheme ? registered.styles.map((item) => `${item.as} && ${item.as}.getThemeStyleSheet ? ${item.as}.getThemeStyleSheet(undefined, styleProps) : ''`).join(',') : ''}
 ].join('');
 
 export { styles, themes };

modules/nuxt-primevue/runtime/plugin.server.js

@@ -1,5 +1,5 @@
 // @ts-expect-error
-import { styles } from '#primevue-style';
+import { styles, themes } from '#primevue-style';
 //import { useRuntimeConfig } from '#imports';
 
 const defineNitroPlugin = (def) => def;
@@ -7,7 +7,7 @@ const defineNitroPlugin = (def) => def;
 export default defineNitroPlugin(async (nitroApp) => {
     nitroApp.hooks.hook('render:html', (html) => {
         html.head.push(styles);
-        //html.head.push(themes);
+        html.head.push(themes);
         //html.htmlAttrs.push('class="p-dark"'); // @todo
     });
 });

nuxt.config.js

@@ -26,7 +26,7 @@ export default defineNuxtConfig({
             ripple: true
         },
         layerOrder: 'primevue',
-        //importTheme: { from: '@/mytheme.js' },
+        importTheme: { from: '@/themes/aura.js' },
         resolvePath: function ({ as, from, type }) {
             const resolvedPath = from.replace('primevue', '@/components/lib');
 

themes/aura.js

@@ -5,6 +5,6 @@ export default {
     base: PrimeOne,
     preset: Aura,
     options: {
-        prefix: 'p'
+        darkModeSelector: '.p-dark'
     }
 };