feat: allow user to interrupt animation;

feat: emit maxHeight change on window height change;
fix: early drag lock before overflow;
refactor: added 'remeda' and small changes for improved clarity;
chore(playground): update testing playground with new examples;

Author: megaarmos

README.md

@@ -76,7 +76,7 @@ For Nuxt 3, just wrap component in `<ClientOnly>`
 
 ```css
 --vsbs-backdrop-bg: rgba(0, 0, 0, 0.5);
---vsbs-shadow-color: hsla(0, 0%, 35%, 0.2);
+--vsbs-shadow-color: rgba(89, 89, 89, 0.2);
 --vsbs-background: #fff;
 --vsbs-border-radius: 16px;
 --vsbs-max-width: 640px;

bun.lockb

@@ -32,7 +32,7 @@
     "url": "https://github.com/megaarmos/vue-spring-bottom-sheet/issues"
   },
   "private": false,
-  "version": "1.0.8",
+  "version": "1.1.0",
   "type": "module",
   "exports": {
     ".": {
@@ -63,6 +63,7 @@
     "@vueuse/integrations": "^12.0.0",
     "@vueuse/motion": "^2.2.6",
     "focus-trap": "^7",
+    "remeda": "^2.19.0",
     "vue": "^3.5.13"
   },
   "devDependencies": {

package.json

@@ -4,44 +4,39 @@ import { ref, version } from 'vue'
 import BottomSheet from 'vue-spring-bottom-sheet'
 import 'vue-spring-bottom-sheet/dist/style.css'
 
-const myBottomSheet = ref<InstanceType<typeof BottomSheet>>()
+const bottomSheet = ref<InstanceType<typeof BottomSheet>>()
 const open = ref(false)
 const maxHeight = ref(0)
-const minHeight = ref(0)
-
-const expandOnContentDrag = ref(true)
 
 const toggle = () => {
   open.value = !open.value
 
   if (open.value) {
-    myBottomSheet.value?.open()
+    bottomSheet.value?.open()
   } else {
-    myBottomSheet.value?.close()
+    bottomSheet.value?.close()
   }
 }
 </script>
 
 <template>
   <div class="content">
-    <button class="btn btn-primary" type="button" @click="toggle">{{ open ? 'Close' : 'Open' }} bottom sheet</button>
+    <button type="button" @click="toggle">{{ open ? 'Close' : 'Open' }} bottom sheet</button>
     <p>vue js: {{ version }}</p>
   </div>
   <ClientOnly>
     <BottomSheet
-      ref="myBottomSheet"
+      ref="bottomSheet"
       :blocking="false"
-      :can-overlay-close="true"
-      :can-swipe-close="true"
-      :expand-on-content-drag="expandOnContentDrag"
       :snap-points="[maxHeight / 4, maxHeight / 1.5]"
-      @min-height="(n) => (minHeight = n)"
+      @closed="open = false"
+      @ready="toggle()"
       @max-height="(n) => (maxHeight = n)"
     >
       <template #header>
         <input type="text" placeholder="Search..." style="width: 100%; padding: 0.5rem; box-sizing: border-box" />
       </template>
-      <p v-for="i in 3" :key="i">
+      <p v-for="i in 3" class="mb-4" :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!
       </p>

playground/nuxt/pages/blocking.vue

@@ -4,38 +4,37 @@ import { ref, version } from 'vue'
 import BottomSheet from 'vue-spring-bottom-sheet'
 import 'vue-spring-bottom-sheet/dist/style.css'
 
-const myBottomSheet = ref<InstanceType<typeof BottomSheet>>()
+const bottomSheet = ref<InstanceType<typeof BottomSheet>>()
 
 const open = () => {
-  myBottomSheet.value?.open()
+  bottomSheet.value?.open()
 }
 
 const close = () => {
-  myBottomSheet.value?.close()
+  bottomSheet.value?.close()
 }
 </script>
 
 <template>
   <div class="content">
-    <button class="btn btn-primary" type="button" @click="open">Open bottom sheet</button>
+    <button type="button" @click="open">Open bottom sheet</button>
     <p>vue js: {{ version }}</p>
   </div>
   <ClientOnly>
-    <BottomSheet ref="myBottomSheet">
-      <p v-for="i in 3" :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!
+    <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.
       </p>
-      <details>
-        <summary>Epcot Center</summary>
-        <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!
-        </p>
+      <details class="mb-4">
+        <summary>Tap to expand</summary>
+        <div class="py-4">
+          <Placeholder class="h-8" />
+          <p class="my-5">It adjusts its height based on the content.</p>
+          <Placeholder class="h-8" />
+        </div>
       </details>
-      <template #footer>
-        <button type="button" @click="close">Close bottom sheet</button>
-      </template>
+      <button type="button" class="mb-4" @click="close">Close bottom sheet</button>
     </BottomSheet>
   </ClientOnly>
 </template>

playground/nuxt/pages/index.vue

@@ -4,34 +4,32 @@ import { ref, version } from 'vue'
 import BottomSheet from 'vue-spring-bottom-sheet'
 import 'vue-spring-bottom-sheet/dist/style.css'
 
-const myBottomSheet = ref<InstanceType<typeof BottomSheet>>()
+const bottomSheet = ref<InstanceType<typeof BottomSheet>>()
 const maxHeight = ref(0)
 const minHeight = ref(0)
 
 const expandOnContentDrag = ref(true)
 
 const open = () => {
-  myBottomSheet.value?.open()
+  bottomSheet.value?.open()
 }
 
 const snapToPoint = (snapPoint: number) => {
-  myBottomSheet.value?.snapToPoint(snapPoint)
+  bottomSheet.value?.snapToPoint(snapPoint)
 }
 </script>
 
 <template>
   <div class="content">
-    <button class="btn btn-primary" type="button" @click="open">Open bottom sheet</button>
+    <button type="button" @click="open">Open bottom sheet</button>
     <p>vue js: {{ version }}</p>
   </div>
   <ClientOnly>
     <BottomSheet
-      ref="myBottomSheet"
-      :blocking="true"
-      :can-overlay-close="true"
-      :can-swipe-close="true"
+      ref="bottomSheet"
+      :can-swipe-close="false"
       :expand-on-content-drag="expandOnContentDrag"
-      :snap-points="[maxHeight / 3, maxHeight / 1.5, maxHeight]"
+      :snap-points="[maxHeight / 3, maxHeight / 1.5, maxHeight - 100]"
       @min-height="(n) => (minHeight = n)"
       @max-height="(n) => (maxHeight = n)"
     >

playground/nuxt/pages/snap.vue

@@ -4,35 +4,24 @@ import { ref, version } from 'vue'
 import BottomSheet from 'vue-spring-bottom-sheet'
 import 'vue-spring-bottom-sheet/dist/style.css'
 
-const myBottomSheet = ref<InstanceType<typeof BottomSheet>>()
-const maxHeight = ref(0)
-
-const expandOnContentDrag = ref(true)
+const bottomSheet = ref<InstanceType<typeof BottomSheet>>()
 
 const open = () => {
-  myBottomSheet.value?.open()
+  bottomSheet.value?.open()
 }
 
 const close = () => {
-  myBottomSheet.value?.close()
+  bottomSheet.value?.close()
 }
 </script>
 
 <template>
   <div class="content">
-    <button class="btn btn-primary" type="button" @click="open">Open bottom sheet</button>
+    <button type="button" @click="open">Open bottom sheet</button>
     <p>vue js: {{ version }}</p>
   </div>
   <ClientOnly>
-    <BottomSheet
-      ref="myBottomSheet"
-      :blocking="true"
-      :can-overlay-close="true"
-      :can-swipe-close="true"
-      :expand-on-content-drag="expandOnContentDrag"
-      :snap-points="[maxHeight / 3, maxHeight / 1.5, maxHeight]"
-      @max-height="(n) => (maxHeight = n)"
-    >
+    <BottomSheet ref="bottomSheet">
       <template #header>
         <h1 style="font-size: 24px; margin: 0; text-align: center">Header</h1>
       </template>

playground/nuxt/pages/sticky.vue

@@ -4,43 +4,38 @@ import { ref, version } from 'vue'
 import BottomSheet from 'vue-spring-bottom-sheet'
 import 'vue-spring-bottom-sheet/dist/style.css'
 
-const myBottomSheet = ref<InstanceType<typeof BottomSheet>>()
+const bottomSheet = ref<InstanceType<typeof BottomSheet>>()
 const open = ref(false)
 const maxHeight = ref(0)
-const minHeight = ref(0)
-
-const expandOnContentDrag = ref(true)
 
 const toggle = () => {
   open.value = !open.value
 
   if (open.value) {
-    myBottomSheet.value?.open()
+    bottomSheet.value?.open()
   } else {
-    myBottomSheet.value?.close()
+    bottomSheet.value?.close()
   }
 }
 </script>
 
 <template>
   <div class="content">
-    <button class="btn btn-primary" type="button" @click="toggle">{{ open ? 'Close' : 'Open' }} bottom sheet</button>
+    <button type="button" @click="toggle">{{ open ? 'Close' : 'Open' }} bottom sheet</button>
     <p>vue js: {{ version }}</p>
   </div>
   <BottomSheet
-    ref="myBottomSheet"
+    ref="bottomSheet"
     :blocking="false"
-    :can-overlay-close="true"
-    :can-swipe-close="true"
-    :expand-on-content-drag="expandOnContentDrag"
     :snap-points="[maxHeight / 4, maxHeight / 1.5]"
-    @min-height="(n) => (minHeight = n)"
+    @closed="open = false"
+    @ready="toggle()"
     @max-height="(n) => (maxHeight = n)"
   >
     <template #header>
       <input type="text" placeholder="Search..." style="width: 100%; padding: 0.5rem; box-sizing: border-box" />
     </template>
-    <p v-for="i in 3" :key="i">
+    <p v-for="i in 3" class="mb-4" :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!
     </p>

playground/vue/src/pages/blocking.vue

@@ -4,37 +4,36 @@ import { ref, version } from 'vue'
 import BottomSheet from 'vue-spring-bottom-sheet'
 import 'vue-spring-bottom-sheet/dist/style.css'
 
-const myBottomSheet = ref<InstanceType<typeof BottomSheet>>()
+const bottomSheet = ref<InstanceType<typeof BottomSheet>>()
 
 const open = () => {
-  myBottomSheet.value?.open()
+  bottomSheet.value?.open()
 }
 
 const close = () => {
-  myBottomSheet.value?.close()
+  bottomSheet.value?.close()
 }
 </script>
 
 <template>
   <div class="content">
-    <button class="btn btn-primary" type="button" @click="open">Open bottom sheet</button>
+    <button type="button" @click="open">Open bottom sheet</button>
     <p>vue js: {{ version }}</p>
   </div>
-  <BottomSheet ref="myBottomSheet">
-    <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!
+  <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.
     </p>
-    <details>
-      <summary>Epcot Center</summary>
-      <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!
-      </p>
+    <details class="mb-4">
+      <summary>Tap to expand</summary>
+      <div class="py-4">
+        <Placeholder class="h-8" />
+        <p class="my-5">It adjusts its height based on the content.</p>
+        <Placeholder class="h-8" />
+      </div>
     </details>
-    <template #footer>
-      <button type="button" @click="close">Close bottom sheet</button>
-    </template>
+    <button type="button" class="mb-4" @click="close"> Close bottom sheet </button>
   </BottomSheet>
 </template>
 

playground/vue/src/pages/index.vue

@@ -4,31 +4,31 @@ import { ref, version } from 'vue'
 import BottomSheet from 'vue-spring-bottom-sheet'
 import 'vue-spring-bottom-sheet/dist/style.css'
 
-const myBottomSheet = ref<InstanceType<typeof BottomSheet>>()
+const bottomSheet = ref<InstanceType<typeof BottomSheet>>()
 const maxHeight = ref(0)
 const minHeight = ref(0)
 
 const expandOnContentDrag = ref(true)
 
 const open = () => {
-  myBottomSheet.value?.open()
+  bottomSheet.value?.open()
 }
 
 const snapToPoint = (snapPoint: number) => {
-  myBottomSheet.value?.snapToPoint(snapPoint)
+  bottomSheet.value?.snapToPoint(snapPoint)
 }
 </script>
 
 <template>
   <div class="content">
-    <button class="btn btn-primary" type="button" @click="open">Open bottom sheet</button>
+    <button type="button" @click="open">Open bottom sheet</button>
     <p>vue js: {{ version }}</p>
   </div>
   <BottomSheet
-    ref="myBottomSheet"
+    ref="bottomSheet"
     :blocking="true"
     :can-overlay-close="true"
-    :can-swipe-close="true"
+    :can-swipe-close="false"
     :expand-on-content-drag="expandOnContentDrag"
     :snap-points="[maxHeight / 3, maxHeight / 1.5, maxHeight]"
     @min-height="(n) => (minHeight = n)"