feat: add more CSS custom properties;

docs: fix listed CSS Custom Properties and typos;

Author: megaarmos

README.md

@@ -62,30 +62,27 @@ const close = () => {
 
 ## Usage in Nuxt 3
 
-For Nuxt 3, just wrap component in `<client-only>`
+For Nuxt 3, just wrap component in `<ClientOnly>`
 
 ```vue
 <template>
   <ClientOnly>
-    <template>
-      <BottomSheet ref="bottomSheet"> Your awesome content </BottomSheet>
-    </template>
+    <BottomSheet ref="bottomSheet"> Your awesome content </BottomSheet>
   </ClientOnly>
 </template>
 ```
 
 ## CSS Custom Properties
 
 ```css
-:root {
-  --rsbs-backdrop-bg: rgba(0, 0, 0, 0.6);
-  --rsbs-bg: #fff;
-  --rsbs-handle-bg: hsla(0, 0%, 0%, 0.14);
-  --rsbs-max-w: auto;
-  --rsbs-ml: env(safe-area-inset-left);
-  --rsbs-mr: env(safe-area-inset-right);
-  --rsbs-overlay-rounded: 16px;
-}
+--vsbs-backdrop-bg: rgba(0, 0, 0, 0.5);
+--vsbs-shadow-color: hsla(0, 0%, 35%, 0.2);
+--vsbs-background: #fff;
+--vsbs-border-radius: 16px;
+--vsbs-max-width: 640px;
+--vsbs-border-color: rgba(46, 59, 66, 0.125);
+--vsbs-padding-x: 16px;
+--vsbs-handle-background: rgba(0, 0, 0, 0.28);
 ```
 
 ## Props

package.json

@@ -32,7 +32,7 @@
     "url": "https://github.com/megaarmos/vue-spring-bottom-sheet/issues"
   },
   "private": false,
-  "version": "1.0.7",
+  "version": "1.0.8",
   "type": "module",
   "exports": {
     ".": {

src/BottomSheet.vue

@@ -374,9 +374,7 @@ defineExpose({ open, close, snapToPoint })
 }
 
 [data-vsbs-shadow='true'] {
-  box-shadow:
-    0 -5px 60px 0 rgba(38, 89, 115, 0.2),
-    0 -1px 0 rgba(38, 89, 115, 0.06);
+  box-shadow: 0 -5px 60px 0 var(--vsbs-shadow-color, hsla(0, 0%, 35%, 0.2));
 }
 
 [data-vsbs-sheet] {
@@ -406,9 +404,9 @@ defineExpose({ open, close, snapToPoint })
 }
 
 [data-vsbs-header] {
-  box-shadow: 0 1px 0 rgba(46, 59, 66, 0.125);
+  box-shadow: 0 1px 0 var(--vsbs-border-color, rgba(46, 59, 66, 0.125));
   flex-shrink: 0;
-  padding: 20px 16px 8px 16px;
+  padding: 20px var(--vsbs-padding-x, 16px) 8px;
   user-select: none;
   z-index: 1;
 }
@@ -428,14 +426,14 @@ defineExpose({ open, close, snapToPoint })
 
 [data-vsbs-header]:empty {
   box-shadow: none;
-  padding: 12px 16px 8px 16px;
+  padding: 12px var(--vsbs-padding-x, 16px) 8px;
 }
 
 [data-vsbs-footer] {
-  box-shadow: 0 -1px 0 rgba(46, 59, 66, 0.125);
+  box-shadow: 0 -1px 0 var(--vsbs-border-color, rgba(46, 59, 66, 0.125));
   flex-grow: 0;
   flex-shrink: 0;
-  padding: 16px;
+  padding: 16px var(--vsbs-padding-x, 16px);
   user-select: none;
 }
 
@@ -455,7 +453,7 @@ defineExpose({ open, close, snapToPoint })
 
 [data-vsbs-content] {
   display: grid;
-  padding: 1vh 3vh 3vh;
+  padding: 1vh var(--vsbs-padding-x, 16px);
   user-select: none;
 }