From 3dcf5558cd1859625fce564e542b55310e41722f Mon Sep 17 00:00:00 2001
From: mertsincan <sincan.mert@gmail.com>
Date: Tue, 2 Apr 2024 11:17:58 +0100
Subject: [PATCH] Refactor #5502

---
 components/lib/base/style/BaseStyle.js    |  7 ++++--
 components/lib/config/PrimeVue.js         | 26 ++++++++++++++++++++++-
 components/lib/styled/PrimeVueStyled.js   | 26 +----------------------
 components/lib/themes/actions/useTheme.js |  1 -
 4 files changed, 31 insertions(+), 29 deletions(-)

diff --git a/components/lib/base/style/BaseStyle.js b/components/lib/base/style/BaseStyle.js
index 1ac7d44f4..c998206b8 100644
--- a/components/lib/base/style/BaseStyle.js
+++ b/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);
 }
 `;
 
diff --git a/components/lib/config/PrimeVue.js b/components/lib/config/PrimeVue.js
index 7541d6176..437e49dd9 100644
--- a/components/lib/config/PrimeVue.js
+++ b/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 };
diff --git a/components/lib/styled/PrimeVueStyled.js b/components/lib/styled/PrimeVueStyled.js
index 56d56360b..8a62e93df 100644
--- a/components/lib/styled/PrimeVueStyled.js
+++ b/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);
     }
 };
diff --git a/components/lib/themes/actions/useTheme.js b/components/lib/themes/actions/useTheme.js
index d9d58147a..c2af87405 100644
--- a/components/lib/themes/actions/useTheme.js
+++ b/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,