Merge branch 'v4' of https://github.com/primefaces/primevue into v4

components/lib/config/PrimeVue.d.ts

@@ -103,7 +103,6 @@ export interface PrimeVueConfiguration {
     zIndex?: PrimeVueZIndexOptions;
     pt?: PassThrough<PrimeVuePTOptions>;
     ptOptions?: PassThroughOptions;
-    unstyled?: boolean;
     csp?: PrimeVueCSPOptions;
 }
 

components/lib/config/PrimeVue.js

@@ -1,8 +1,5 @@
 import { FilterMatchMode } from 'primevue/api';
-import Theme, { ThemeService } from 'primevue/themes';
+import { inject, reactive } from 'vue';
-import PrimeOne from 'primevue/themes/primeone';
-import Aura from 'primevue/themes/primeone/aura';
-import { inject, reactive, ref, watch } from 'vue';
 
 export const defaultOptions = {
     ripple: false,
@@ -136,21 +133,11 @@ export const defaultOptions = {
         menu: 1000,
         tooltip: 1100
     },
-    theme: {
-        base: PrimeOne,
-        preset: Aura,
-        options: {
-            prefix: 'p',
-            darkModeSelector: 'system',
-            cssLayer: false
-        }
-    },
     pt: undefined,
     ptOptions: {
         mergeSections: true,
         mergeProps: false
     },
-    unstyled: false,
     csp: {
         nonce: undefined
     }
@@ -168,37 +155,19 @@ export function usePrimeVue() {
     return PrimeVue;
 }
 
-function setupTheme(app, PrimeVue) {
+export function setup(app, options) {
-    const isChanged = ref(false);
-
-    watch(
-        PrimeVue.config.theme,
-        (newValue) => {
-            if (!isChanged.value) {
-                Theme.setTheme(newValue);
-            }
-
-            isChanged.value = false;
-        },
-        { immediate: true, deep: true }
-    );
-
-    ThemeService.on('theme:change', function (newTheme) {
-        isChanged.value = true;
-        app.config.globalProperties.$primevue.config.theme = newTheme;
-    });
-}
-
-export default {
-    install: (app, options) => {
-        const configOptions = options ? { ...defaultOptions, ...options } : { ...defaultOptions };
     const PrimeVue = {
-            config: reactive(configOptions)
+        config: reactive(options)
     };
 
     app.config.globalProperties.$primevue = PrimeVue;
     app.provide(PrimeVueSymbol, PrimeVue);
 
-        setupTheme(app, PrimeVue);
+    return PrimeVue;
+}
+
+export default {
+    install: () => {
+        console.error("This plugin has been removed in v4 version. Use 'PrimeVueStyled' plugin for styled mode, and 'PrimeVueUnstyled' plugin for unstyled mode.");
     }
 };

components/lib/styled/PrimeVueStyled.d.ts

@@ -0,0 +1 @@
+export * from '../config';

components/lib/styled/PrimeVueStyled.js

@@ -0,0 +1,50 @@
+import * as PrimeVueConfig from 'primevue/config';
+import Theme, { ThemeService } from 'primevue/themes';
+import PrimeOne from 'primevue/themes/primeone';
+import Aura from 'primevue/themes/primeone/aura';
+import { ref, watch } from 'vue';
+
+export const defaultOptions = {
+    ...PrimeVueConfig.defaultOptions,
+    theme: {
+        base: PrimeOne,
+        preset: Aura,
+        options: {
+            prefix: 'p',
+            darkModeSelector: 'system',
+            cssLayer: false
+        }
+    }
+};
+
+export const { usePrimeVue } = PrimeVueConfig;
+
+function setupTheme(app, PrimeVue) {
+    const isChanged = ref(false);
+
+    watch(
+        PrimeVue.config.theme,
+        (newValue) => {
+            if (!isChanged.value) {
+                Theme.setTheme(newValue);
+            }
+
+            isChanged.value = false;
+        },
+        { immediate: true, deep: true }
+    );
+
+    ThemeService.on('theme:change', function (newTheme) {
+        isChanged.value = true;
+        app.config.globalProperties.$primevue.config.theme = newTheme;
+    });
+}
+
+export default {
+    install: (app, options) => {
+        const configOptions = { ...defaultOptions, ...options, unstyled: false };
+        const PrimeVue = PrimeVueConfig.setup(app, configOptions);
+
+        setupTheme(app, PrimeVue);
+    }
+};

components/lib/styled/package.json

@@ -0,0 +1,6 @@
+{
+    "main": "./primevuestyled.cjs.js",
+    "module": "./primevuestyled.esm.js",
+    "unpkg": "./primevuestyled.min.js",
+    "types": "./PrimeVueStyled.d.ts"
+}

components/lib/unstyled/PrimeVueUnstyled.d.ts

@@ -0,0 +1 @@
+export * from '../config';

components/lib/unstyled/PrimeVueUnstyled.js

@@ -0,0 +1,11 @@
+import * as PrimeVueConfig from 'primevue/config';
+
+export const { defaultOptions, usePrimeVue } = PrimeVueConfig;
+
+export default {
+    install: (app, options) => {
+        const configOptions = { ...defaultOptions, ...options, unstyled: true };
+
+        PrimeVueConfig.setup(app, configOptions);
+    }
+};

components/lib/unstyled/package.json

@@ -0,0 +1,6 @@
+{
+    "main": "./primevueunstyled.cjs.js",
+    "module": "./primevueunstyled.esm.js",
+    "unpkg": "./primevueunstyled.min.js",
+    "types": "./PrimeVueUnstyled.d.ts"
+}

modules/nuxt-primevue/module.js

@@ -15,6 +15,7 @@ export default defineNuxtModule({
         layerOrder: 'tailwind-base, primevue, tailwind-utilities',
         importPT: undefined,
         importTheme: undefined,
+        unstyled: false,
         options: {},
         components: {
             prefix: '',
@@ -39,7 +40,8 @@ export default defineNuxtModule({
     setup(moduleOptions, nuxt) {
         const resolver = createResolver(import.meta.url);
         const registered = register(moduleOptions);
-        const { importPT, importTheme, options } = moduleOptions;
+        const { importPT, importTheme, options, unstyled } = moduleOptions;
+        const hasTheme = importTheme && !unstyled;
 
         nuxt.options.runtimeConfig.public.primevue = {
             ...moduleOptions,
@@ -52,7 +54,7 @@ export default defineNuxtModule({
         const styleContent = () => `
 ${registered.styles.map((style) => `import ${style.as} from '${style.from}';`).join('\n')}
 ${
-    importTheme
+    hasTheme
         ? `import Theme from 'primevue/themes';
 import ${importTheme.as} from '${importTheme.from}';\n`
         : ''
@@ -66,11 +68,11 @@ const styles = [
   ${registered.styles.map((item) => `${item.as} && ${item.as}.getStyleSheet ? ${item.as}.getStyleSheet(undefined, styleProps) : ''`).join(',')}
 ].join('');
 
-${importTheme ? `Theme.setTheme(${importTheme.as})` : ''}
+${hasTheme ? `Theme.setTheme(${importTheme.as})` : ''}
 
 const themes = [
-    ${importTheme ? `${registered.styles[0].as} && ${registered.styles[0].as}.getCommonThemeStyleSheet ? ${registered.styles[0].as}.getCommonThemeStyleSheet(undefined, styleProps) : ''` : ''},
+    ${hasTheme ? `${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(undefined, styleProps) : ''`).join(',') : ''}
+    ${hasTheme ? registered.styles.map((item) => `${item.as} && ${item.as}.getThemeStyleSheet ? ${item.as}.getThemeStyleSheet(undefined, styleProps) : ''`).join(',') : ''}
 ].join('');
 
 export { styles, themes };
@@ -92,16 +94,16 @@ ${registered.config.map((config) => `import ${config.as} from '${config.from}';`
 ${registered.services.map((service) => `import ${service.as} from '${service.from}';`).join('\n')}
 ${registered.directives.map((directive) => `import ${directive.as} from '${directive.from}';`).join('\n')}
 ${importPT ? `import ${importPT.as} from '${importPT.from}';\n` : ''}
-${importTheme ? `import ${importTheme.as} from '${importTheme.from}';\n` : ''}
+${hasTheme ? `import ${importTheme.as} from '${importTheme.from}';\n` : ''}
 
 export default defineNuxtPlugin(({ vueApp }) => {
   const runtimeConfig = useRuntimeConfig();
   const config = runtimeConfig?.public?.primevue ?? {};
   const { usePrimeVue = true, options = {} } = config;
   const pt = ${importPT ? `{ pt: ${importPT.as} }` : `{}`};
-  const theme = ${importTheme ? `{ theme: ${importTheme.as} }` : `{}`};
+  const theme = ${hasTheme ? `{ theme: ${importTheme.as} }` : `{}`};
 
-  usePrimeVue && vueApp.use(PrimeVue, { ...options, ...pt, ...theme });
+  usePrimeVue && vueApp.use(${unstyled ? 'PrimeVueUnstyled' : 'PrimeVueStyled'}, { ...options, ...pt, ...theme });
   ${registered.services.map((service) => `vueApp.use(${service.as});`).join('\n')}
   ${registered.directives.map((directive) => `vueApp.directive('${directive.name}', ${directive.as});`).join('\n')}
 });

modules/nuxt-primevue/register.js

@@ -17,12 +17,18 @@ function registerItems(items = [], options = {}, params) {
     });
 }
 
-function registerConfig(resolvePath) {
+function registerConfig(resolvePath, unstyled = false) {
     return [
-        {
+        unstyled
-            name: 'PrimeVue',
+            ? {
-            as: 'PrimeVue',
+                  name: 'PrimeVueUnstyled',
-            from: resolvePath({ name: 'PrimeVue', as: 'PrimeVue', from: `primevue/config`, type: 'config' })
+                  as: 'PrimeVueUnstyled',
+                  from: resolvePath({ name: 'PrimeVueUnstyled', as: 'PrimeVueUnstyled', from: `primevue/unstyled`, type: 'config' })
+              }
+            : {
+                  name: 'PrimeVueStyled',
+                  as: 'PrimeVueStyled',
+                  from: resolvePath({ name: 'PrimeVueStyled', as: 'PrimeVueStyled', from: `primevue/styled`, type: 'config' })
               }
     ];
 }
@@ -94,7 +100,7 @@ function registerServices(resolvePath, registered) {
     }));
 }
 
-function registerStyles(resolvePath, registered, options) {
+function registerStyles(resolvePath, registered, moduleOptions) {
     const styles = [
         {
             name: 'BaseStyle',
@@ -103,7 +109,7 @@ function registerStyles(resolvePath, registered, options) {
         }
     ];
 
-    if (!options?.unstyled) {
+    if (!moduleOptions.unstyled) {
         if (Utils.object.isNotEmpty(registered?.components)) {
             styles.push({
                 name: 'BaseComponentStyle',
@@ -127,14 +133,14 @@ function registerStyles(resolvePath, registered, options) {
     return styles;
 }
 
-function registerInjectStylesAsString(options) {
+function registerInjectStylesAsString(moduleOptions) {
-    return [Utils.object.createStyleAsString(options.layerOrder ? `@layer ${options.layerOrder}` : undefined, { name: 'layer-order' })];
+    return [Utils.object.createStyleAsString(moduleOptions.layerOrder ? `@layer ${moduleOptions.layerOrder}` : undefined, { name: 'layer-order' })];
 }
 
 export function register(moduleOptions) {
     const resolvePath = (resolveOptions) => Utils.object.getPath(moduleOptions.resolvePath, resolveOptions);
 
-    const config = registerConfig(resolvePath);
+    const config = registerConfig(resolvePath, moduleOptions.unstyled);
     const components = registerComponents(resolvePath, moduleOptions.components);
     const directives = registerDirectives(resolvePath, moduleOptions.directives);
     const composables = registerComposables(resolvePath, moduleOptions.composables);
@@ -144,7 +150,7 @@ export function register(moduleOptions) {
         composables
     };
     const services = registerServices(resolvePath, registered);
-    const styles = registerStyles(resolvePath, registered, moduleOptions.options);
+    const styles = registerStyles(resolvePath, registered, moduleOptions);
     const injectStylesAsString = registerInjectStylesAsString(moduleOptions);
 
     return {

nuxt-vite.config.js

@@ -221,6 +221,9 @@ export default {
         },
         alias: {
             'primevue/utils': path.resolve(__dirname, './components/lib/utils/Utils.js'),
+            'primevue/config': path.resolve(__dirname, './components/lib/config/PrimeVue.js'),
+            'primevue/styled': path.resolve(__dirname, './components/lib/styled/PrimeVueStyled.js'),
+            'primevue/unstyled': path.resolve(__dirname, './components/lib/unstyled/PrimeVueUnstyled.js'),
             'primevue/api': path.resolve(__dirname, './components/lib/api/Api.js'),
             ...STYLE_ALIAS,
             ...THEME_ALIAS,

rollup.config.js

@@ -229,6 +229,8 @@ const CORE_DEPENDENCIES = {
     'primevue/utils': 'primevue.utils',
     'primevue/api': 'primevue.api',
     'primevue/config': 'primevue.config',
+    'primevue/styled': 'primevue.styled',
+    'primevue/unstyled': 'primevue.unstyled',
     'primevue/base': 'primevue.base',
     'primevue/usestyle': 'primevue.usestyle',
     ...CORE_STYLE_DEPENDENCIES,
@@ -309,7 +311,7 @@ const TERSER_PLUGIN_OPTIONS = {
 const PLUGINS = [vue(), postcss(POSTCSS_PLUGIN_OPTIONS), babel(BABEL_PLUGIN_OPTIONS)];
 
 function addEntry(folder, inFile, outFile) {
-    const exports = inFile === 'PrimeVue.js' || folder === 'passthrough/tailwind' ? 'named' : 'auto';
+    const exports = inFile.startsWith('PrimeVue') || folder === 'passthrough/tailwind' ? 'named' : 'auto';
     const useCorePlugin = Object.keys(GLOBAL_COMPONENT_DEPENDENCIES).some((d) => d.replace('primevue/', '') === folder);
     const plugins = PLUGINS;
     const external = EXTERNAL_COMPONENT;
@@ -500,6 +502,8 @@ function addDirectives() {
 
 function addConfig() {
     addEntry('config', 'PrimeVue.js', 'config');
+    addEntry('styled', 'PrimeVueStyled.js', 'primevuestyled');
+    addEntry('unstyled', 'PrimeVueUnstyled.js', 'primevueunstyled');
 }
 
 function addPassThrough() {