fix: document scroll on dragging;

fix: update package references to use @douxcode/vue-spring-bottom-sheet and adjust README instructions;

Author: megaarmos

README.md

@@ -13,7 +13,7 @@ npm install @douxcode/vue-spring-bottom-sheet
 ```
 
 ```
-bun i @douxcode/vue-spring-bottom-sheet
+bun install @douxcode/vue-spring-bottom-sheet
 ```
 
 # Getting started

playground/nuxt/components/NavigationBar.vue

@@ -12,6 +12,7 @@
 <style scoped>
 .navbar {
   background-color: #e6e6e6;
+  font-size: 14px;
 }
 
 .nav-list {

playground/nuxt/nuxt.config.ts

@@ -1,5 +1,5 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   compatibilityDate: '2024-11-01',
-  devtools: { enabled: true },
+  devtools: { enabled: false },
 })

playground/nuxt/package.json

@@ -5,6 +5,7 @@
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev",
+    "dev:host": "nuxt dev --host",
     "generate": "nuxt generate",
     "preview": "nuxt preview",
     "postinstall": "nuxt prepare"
@@ -14,6 +15,6 @@
     "nuxt": "^3.14.1592",
     "vue": "latest",
     "vue-router": "latest",
-    "vue-spring-bottom-sheet": "link:vue-spring-bottom-sheet"
+    "@douxcode/vue-spring-bottom-sheet": "link:@douxcode/vue-spring-bottom-sheet"
   }
 }

playground/nuxt/pages/blocking.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { ref, version } from 'vue'
 
-import BottomSheet from 'vue-spring-bottom-sheet'
-import 'vue-spring-bottom-sheet/dist/style.css'
+import BottomSheet from '@douxcode/vue-spring-bottom-sheet'
+import '@douxcode/vue-spring-bottom-sheet/dist/style.css'
 
 const bottomSheet = ref<InstanceType<typeof BottomSheet>>()
 const open = ref(false)

playground/nuxt/pages/index.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { ref, version } from 'vue'
 
-import BottomSheet from 'vue-spring-bottom-sheet'
-import 'vue-spring-bottom-sheet/dist/style.css'
+import BottomSheet from '@douxcode/vue-spring-bottom-sheet'
+import '@douxcode/vue-spring-bottom-sheet/dist/style.css'
 
 const bottomSheet = ref<InstanceType<typeof BottomSheet>>()
 
@@ -23,8 +23,9 @@ const close = () => {
   <ClientOnly>
     <BottomSheet ref="bottomSheet">
       <p class="mb-4">
-        Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias atque error dignissimos impedit iure facilis ipsam sit cum molestias,
-        natus, cupiditate molestiae, id exercitationem eaque obcaecati a animi. Accusamus, pariatur.
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias atque error dignissimos
+        impedit iure facilis ipsam sit cum molestias, natus, cupiditate molestiae, id exercitationem
+        eaque obcaecati a animi. Accusamus, pariatur.
       </p>
       <details class="mb-4">
         <summary>Tap to expand</summary>

playground/nuxt/pages/snap.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { ref, version } from 'vue'
 
-import BottomSheet from 'vue-spring-bottom-sheet'
-import 'vue-spring-bottom-sheet/dist/style.css'
+import BottomSheet from '@douxcode/vue-spring-bottom-sheet'
+import '@douxcode/vue-spring-bottom-sheet/dist/style.css'
 
 const bottomSheet = ref<InstanceType<typeof BottomSheet>>()
 const maxHeight = ref(0)
@@ -38,12 +38,16 @@ const snapToPoint = (snapPoint: number) => {
         <button type="button" @click="snapToPoint(maxHeight / 1.5)">Middle</button>
         <button type="button" @click="snapToPoint(maxHeight / 3)">Bottom</button>
       </div>
-      <button type="button" style="margin-bottom: 1rem" @click="expandOnContentDrag = !expandOnContentDrag">
+      <button
+        type="button"
+        style="margin-bottom: 1rem"
+        @click="expandOnContentDrag = !expandOnContentDrag"
+      >
         {{ expandOnContentDrag ? 'Enable' : 'Disable' }} expand on content drag
       </button>
       <p v-for="i in 14" :key="i">
-        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iste aperiam, accusamus amet veniam officiis libero necessitatibus ipsum,
-        reprehenderit eveniet neque ad delectus fugit!
+        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iste aperiam, accusamus amet
+        veniam officiis libero necessitatibus ipsum, reprehenderit eveniet neque ad delectus fugit!
       </p>
     </BottomSheet>
   </ClientOnly>

playground/nuxt/pages/sticky.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { ref, version } from 'vue'
 
-import BottomSheet from 'vue-spring-bottom-sheet'
-import 'vue-spring-bottom-sheet/dist/style.css'
+import BottomSheet from '@douxcode/vue-spring-bottom-sheet'
+import '@douxcode/vue-spring-bottom-sheet/dist/style.css'
 
 const bottomSheet = ref<InstanceType<typeof BottomSheet>>()
 
@@ -26,8 +26,8 @@ const close = () => {
         <h1 style="font-size: 24px; margin: 0; text-align: center">Header</h1>
       </template>
       <p v-for="i in 5" :key="i">
-        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iste aperiam, accusamus amet veniam officiis libero necessitatibus ipsum,
-        reprehenderit eveniet neque ad delectus fugit!
+        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iste aperiam, accusamus amet
+        veniam officiis libero necessitatibus ipsum, reprehenderit eveniet neque ad delectus fugit!
       </p>
       <template #footer>
         <button type="button" @click="close">Close bottom sheet</button>

playground/vue/package.json

@@ -11,7 +11,7 @@
   "dependencies": {
     "vue": "3.3.0",
     "vue-router": "^4.5.0",
-    "vue-spring-bottom-sheet": "link:vue-spring-bottom-sheet"
+    "@douxcode/vue-spring-bottom-sheet": "link:@douxcode/vue-spring-bottom-sheet"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.2.1",

src/BottomSheet.vue

@@ -57,7 +57,7 @@ const { height: sheetContentHeight } = useElementBounding(sheetContent)
 
 const { activate, deactivate } = useFocusTrap([sheet, backdrop], { immediate: false })
 
-// Computed minimum height
+// Computed values
 const minHeightComputed = computed(() =>
   Math.ceil(sheetContentHeight.value + sheetHeaderHeight.value + sheetFooterHeight.value),
 )
@@ -86,6 +86,7 @@ const {
 } = useSnapPoints(snapPointsRef, height)
 
 const isWindowScrollLocked = useScrollLock(document.body)
+const isWindowRootScrollLocked = useScrollLock(document.documentElement)
 
 // Keyboard event handler
 const handleEscapeKey = (e: KeyboardEvent) => {
@@ -105,6 +106,7 @@ const open = () => {
   push('y', 0, motionProperties, { type: 'tween', easings: 'easeInOut', bounce: 0, duration: 300 })
   showSheet.value = true
   isWindowScrollLocked.value = true
+  isWindowRootScrollLocked.value = true
 
   window.addEventListener('keydown', handleEscapeKey)
 
@@ -125,6 +127,7 @@ const close = () => {
 
   showSheet.value = false
   isWindowScrollLocked.value = false
+  isWindowRootScrollLocked.value = false
 
   if (props.blocking) {
     deactivate()