feat: add outer borders;

docs: clean up README formatting;
chore: bump version

Author: megaarmos

README.md

@@ -76,22 +76,20 @@ const close = () => {
 
 ```vue
 <script setup lang="ts">
-import { ref } from "vue";
-
-import BottomSheet from "@douxcode/vue-spring-bottom-sheet";
-import "@douxcode/vue-spring-bottom-sheet/dist/style.css";
+import { ref } from 'vue'
 
-const sheet = ref(false);
+import BottomSheet from '@douxcode/vue-spring-bottom-sheet'
+import '@douxcode/vue-spring-bottom-sheet/dist/style.css'
 
+const sheet = ref(false)
 </script>
 
 <template>
-  <button type="button" @click="sheet = true"> Open bottom sheet </button>
+  <button type="button" @click="sheet = true">Open bottom sheet</button>
   <BottomSheet v-model="sheet"> Your content </BottomSheet>
 </template>
 ```
 
-
 ## Usage in Nuxt 3
 
 For Nuxt 3, just wrap component in `<ClientOnly>`
@@ -123,6 +121,7 @@ For Nuxt 3, just wrap component in `<ClientOnly>`
 --vsbs-shadow-color: rgba(89, 89, 89, 0.2);
 --vsbs-background: #fff;
 --vsbs-border-radius: 16px;
+--vsbs-outer-border-color: transparent;
 --vsbs-max-width: 640px;
 --vsbs-border-color: rgba(46, 59, 66, 0.125);
 --vsbs-padding-x: 16px;
@@ -155,13 +154,13 @@ Assuming there is `const bottomSheet = ref()`
 
 ## Events
 
-| Event          | Description                            | Payload         |
-| -------------- | -------------------------------------- | --------------- |
-| opened         | Emitted when sheet finishes opening    | -               |
-| closed         | Emitted when sheet finishes closing    | -               |
-| dragging-up    | Emitted when user drags sheet upward   | -               |
-| dragging-down  | Emitted when user drags sheet downward | -               |
-| instinctHeight | Emitted when content height changes    | height (number) |
+| Event          | Description                            | Payload                 |
+| -------------- | -------------------------------------- | ----------------------- |
+| opened         | Emitted when sheet finishes opening    | -                       |
+| closed         | Emitted when sheet finishes closing    | -                       |
+| dragging-up    | Emitted when user drags sheet upward   | -                       |
+| dragging-down  | Emitted when user drags sheet downward | -                       |
+| instinctHeight | Emitted when content height changes    | height (number)         |
 | snapped        | Emitted when sheet finishes snapping   | snapPointIndex (number) |
 
 ## Acknowledgments

packages/vue-spring-bottom-sheet/package.json

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

packages/vue-spring-bottom-sheet/src/BottomSheet.vue

@@ -616,6 +616,10 @@ defineExpose({ open, close, snapToPoint })
   background-color: var(--vsbs-background, #fff);
   border-top-left-radius: var(--vsbs-border-radius, 16px);
   border-top-right-radius: var(--vsbs-border-radius, 16px);
+
+  border-right: 1px solid var(--vsbs-outer-border-color, transparent);
+  border-left: 1px solid var(--vsbs-outer-border-color, transparent);
+
   bottom: 0;
   display: flex;
   flex-direction: column;
@@ -642,6 +646,11 @@ defineExpose({ open, close, snapToPoint })
   padding: 20px var(--vsbs-padding-x, 16px) 8px;
   user-select: none;
   z-index: 3;
+
+  border-top-left-radius: var(--vsbs-border-radius, 16px);
+  border-top-right-radius: var(--vsbs-border-radius, 16px);
+
+  border-top: 1px solid var(--vsbs-outer-border-color, transparent);
 }
 
 [data-vsbs-header]:before {