fix(ConfigProvider): add ability to pass string for padding and `ma…

…rgin` [rem]
unovue · Sep 29, 2024 · 659dea4 · 659dea4
1 parent fed1551
commit 659dea4
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git a/packages/radix-vue/src/shared/types.ts b/packages/radix-vue/src/shared/types.ts
@@ -38,9 +38,14 @@ interface SingleOrMultipleProps<ValidValue = string | string[], ExplicitType = S
 
 }
 
+/**
+ * if padding or margin is number, it will be in px
+ * if padding or margin is true, it will be var(--scrollbar-width)
+ * otherwise, it will be passed string
+ */
 type ScrollBodyOption = {
-  padding?: boolean | number
-  margin?: boolean | number
+  padding?: boolean | number | string
+  margin?: boolean | number | string
 }
 
 type AcceptableValue = string | number | boolean | Record<string, any>

diff --git a/packages/radix-vue/src/shared/useBodyScrollLock.ts b/packages/radix-vue/src/shared/useBodyScrollLock.ts
@@ -64,8 +64,8 @@ const useBodyLockStackCount = createSharedComposable(() => {
       : ({ padding: 0, margin: 0 })
 
     if (verticalScrollbarWidth > 0) {
-      document.body.style.paddingRight = `${config.padding}px`
-      document.body.style.marginRight = `${config.margin}px`
+      document.body.style.paddingRight = typeof config.padding === 'number' ? `${config.padding}px` : String(config.padding)
+      document.body.style.marginRight = typeof config.margin === 'number' ? `${config.margin}px` : String(config.margin)
       document.body.style.setProperty('--scrollbar-width', `${verticalScrollbarWidth}px`)
       document.body.style.overflow = 'hidden'
     }