Refactor #5502

components/lib/base/style/BaseStyle.js

@@ -1,7 +1,10 @@
-import Theme, { $dt } from 'primevue/themes';
+import Theme from 'primevue/themes';
 import { useStyle } from 'primevue/usestyle';
 import { ObjectUtils } from 'primevue/utils';
 
+/**
+ * @todo padding-right: ${$dt('scrollbar.width')};
+ */
 const css = `
 .p-hidden-accessible {
     border: 0;
@@ -21,7 +24,7 @@ const css = `
 
 .p-overflow-hidden {
     overflow: hidden;
-    padding-right: ${$dt('scrollbar.width')};
+    padding-right: var(--p-scrollbar-width);
 }
 `;
 

components/lib/config/PrimeVue.js

@@ -1,5 +1,6 @@
 import { FilterMatchMode } from 'primevue/api';
-import { inject, reactive } from 'vue';
+import Theme, { ThemeService } from 'primevue/themes';
+import { inject, reactive, ref, watch } from 'vue';
 
 export const defaultOptions = {
     ripple: false,
@@ -165,9 +166,32 @@ export function setup(app, options) {
     app.config.globalProperties.$primevue = PrimeVue;
     app.provide(PrimeVueSymbol, PrimeVue);
 
+    setupTheme(app, PrimeVue);
+
     return PrimeVue;
 }
 
+export 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 };

components/lib/styled/PrimeVueStyled.js

@@ -1,8 +1,6 @@
 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,
@@ -19,32 +17,10 @@ export const defaultOptions = {
 
 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);
+        PrimeVueConfig.setup(app, configOptions);
     }
 };

components/lib/themes/actions/useTheme.js

@@ -1,7 +1,6 @@
 import Theme from 'primevue/themes';
 
 export default (theme) => {
-    // @todo
     const [{ options: o1 }, { options: o2 }] = [Theme.getTheme(), theme];
     const newTheme = {
         ...theme,