Merge pull request #18 from rosmis/rosmis-add-snapped-event

feat(snap): added snapped emit event

Author: megaarmos

README.md

@@ -162,6 +162,7 @@ Assuming there is `const bottomSheet = ref()`
 | 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
 

bun.lock

@@ -23,7 +23,7 @@
     },
     "packages/vue-spring-bottom-sheet": {
       "name": "@douxcode/vue-spring-bottom-sheet",
-      "version": "2.0.4",
+      "version": "2.1.0",
       "dependencies": {
         "@vueuse/core": "^13.0.0",
         "@vueuse/integrations": "^13.0.0",

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

@@ -26,6 +26,7 @@ const emit = defineEmits<{
   (e: 'ready'): void
   (e: 'dragging-up'): void
   (e: 'dragging-down'): void
+  (e: 'snapped', snapPointIndex?: number): void
   (e: 'instinctHeight', instinctHeight: number): void
   (e: 'update:modelValue'): void
 }>()
@@ -243,6 +244,7 @@ const snapToPoint = (index: number) => {
   controls = animate(heightValue, height.value, {
     duration: props.duration / 1000,
     ease: 'easeInOut',
+    onComplete: () => emit('snapped', snapPointsRef.value.indexOf(snapPointsRef.value[index])),
   })
 }
 
@@ -332,6 +334,11 @@ const handlePanEnd = () => {
   controls = animate(heightValue, height.value, {
     duration: props.duration / 1000,
     ease: 'easeInOut',
+    onComplete: () =>
+      emit(
+        'snapped',
+        snapPointsRef.value.indexOf(snapPointsRef.value[closestSnapPointIndex.value]),
+      ),
   })
   controls = animate(translateYValue, 0, {
     duration: props.duration / 1000,