fix: Base Presets: CSS var --p-scrollbar-width is not defined. Fixes #6094

apps/showcase/nuxt.config.js

@@ -26,7 +26,7 @@ export default defineNuxtConfig({
     },
     vite: {
         resolve: {
-            dedupe: ['vue', '@primeuix/themes'],
+            dedupe: ['vue', '@primeuix/themes', '@primeuix/utils'],
             optimizeDeps: {
                 disabled: true
             },

packages/primevue/src/blockui/BlockUI.vue

@@ -5,8 +5,9 @@
 </template>
 
 <script>
-import { addClass, blockBodyScroll, createElement, hasCSSAnimation, unblockBodyScroll } from '@primeuix/utils/dom';
+import { addClass, createElement, hasCSSAnimation } from '@primeuix/utils/dom';
 import { ZIndex } from '@primeuix/utils/zindex';
+import { blockBodyScroll, unblockBodyScroll } from 'primevue/utils';
 import BaseBlockUI from './BaseBlockUI.vue';
 
 export default {

packages/primevue/src/dialog/Dialog.vue

@@ -62,7 +62,7 @@
 </template>
 
 <script>
-import { addClass, addStyle, blockBodyScroll, focus, getOuterHeight, getOuterWidth, getViewport, setAttribute, unblockBodyScroll } from '@primeuix/utils/dom';
+import { addClass, addStyle, focus, getOuterHeight, getOuterWidth, getViewport, setAttribute } from '@primeuix/utils/dom';
 import { ZIndex } from '@primeuix/utils/zindex';
 import TimesIcon from '@primevue/icons/times';
 import WindowMaximizeIcon from '@primevue/icons/windowmaximize';
@@ -71,6 +71,7 @@ import Button from 'primevue/button';
 import FocusTrap from 'primevue/focustrap';
 import Portal from 'primevue/portal';
 import Ripple from 'primevue/ripple';
+import { blockBodyScroll, unblockBodyScroll } from 'primevue/utils';
 import { computed } from 'vue';
 import BaseDialog from './BaseDialog.vue';
 

packages/primevue/src/drawer/Drawer.vue

@@ -42,12 +42,13 @@
 </template>
 
 <script>
-import { addClass, blockBodyScroll, focus, unblockBodyScroll } from '@primeuix/utils/dom';
+import { addClass, focus } from '@primeuix/utils/dom';
 import { ZIndex } from '@primeuix/utils/zindex';
 import TimesIcon from '@primevue/icons/times';
 import Button from 'primevue/button';
 import FocusTrap from 'primevue/focustrap';
 import Portal from 'primevue/portal';
+import { blockBodyScroll, unblockBodyScroll } from 'primevue/utils';
 import BaseDrawer from './BaseDrawer.vue';
 
 export default {

packages/primevue/src/galleria/Galleria.vue

@@ -10,10 +10,11 @@
 </template>
 
 <script>
-import { unblockBodyScroll, blockBodyScroll, addClass } from '@primeuix/utils/dom';
+import { addClass } from '@primeuix/utils/dom';
 import { ZIndex } from '@primeuix/utils/zindex';
 import FocusTrap from 'primevue/focustrap';
 import Portal from 'primevue/portal';
+import { blockBodyScroll, unblockBodyScroll } from 'primevue/utils';
 import BaseGalleria from './BaseGalleria.vue';
 import GalleriaContent from './GalleriaContent.vue';
 

packages/primevue/src/image/Image.vue

@@ -56,7 +56,7 @@
 </template>
 
 <script>
-import { blockBodyScroll, isAttributeEquals, focus, addClass, unblockBodyScroll } from '@primeuix/utils/dom';
+import { addClass, focus, isAttributeEquals } from '@primeuix/utils/dom';
 import { ZIndex } from '@primeuix/utils/zindex';
 import EyeIcon from '@primevue/icons/eye';
 import RefreshIcon from '@primevue/icons/refresh';
@@ -66,6 +66,7 @@ import TimesIcon from '@primevue/icons/times';
 import UndoIcon from '@primevue/icons/undo';
 import FocusTrap from 'primevue/focustrap';
 import Portal from 'primevue/portal';
+import { blockBodyScroll, unblockBodyScroll } from 'primevue/utils';
 import BaseImage from './BaseImage.vue';
 
 export default {

packages/primevue/src/utils/Utils.d.ts

@@ -0,0 +1,2 @@
+export declare function blockBodyScroll() : void;
+export declare function unblockBodyScroll() : void;

packages/primevue/src/utils/Utils.js

@@ -0,0 +1,10 @@
+import { $dt } from "@primeuix/styled";
+import * as utils from "@primeuix/utils";
+
+export function blockBodyScroll() {
+    utils.blockBodyScroll({ variableName: $dt('scrollbar.width').name });
+}
+
+export function unblockBodyScroll() {
+    utils.unblockBodyScroll({ variableName: $dt('scrollbar.width').name });
+}

packages/primevue/src/utils/package.json

@@ -0,0 +1,5 @@
+{
+    "main": "./Utils.js",
+    "module": "./Utils.js",
+    "types": "./Utils.d.ts"
+}