Fixed #5502 - Add PrimeVueStyled and PrimeVueUnstyled plugins

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