Merge pull request #26 from ChillyLife11/master

New events "opening-started" and "closing-started" to track when sheet starts opening or closing

Author: megaarmos

README.md

@@ -159,14 +159,16 @@ 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)         |
-| snapped        | Emitted when sheet finishes snapping   | snapPointIndex (number) |
+| Event           | Description                            | Payload                 |
+| --------------  | -------------------------------------- | ----------------------- |
+| opened          | Emitted when sheet finishes opening    | -                       |
+| opening-started | Emitted when sheet starts opening      | -                       |
+| closed          | Emitted when sheet finishes closing    | -                       |
+| closing-started | Emitted when sheet starts 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/src/BottomSheet.vue

@@ -24,7 +24,9 @@ const props = withDefaults(defineProps<BottomSheetProps>(), {
 
 const emit = defineEmits<{
   (e: 'opened'): void
+  (e: 'opening-started'): void
   (e: 'closed'): void
+  (e: 'closing-started'): void
   (e: 'ready'): void
   (e: 'dragging-up'): void
   (e: 'dragging-down'): void
@@ -125,8 +127,13 @@ const backdropClick = () => {
   if (props.canBackdropClose) close()
 }
 
+let isOpening = false
 const open = async () => {
+  if (isOpening) return;
+  
   showSheet.value = true
+  isOpening = true
+  emit('opening-started')
 
   if (props.blocking) {
     isWindowScrollLocked.value = true
@@ -194,6 +201,7 @@ const open = async () => {
 
   window.addEventListener('keydown', handleEscapeKey)
 
+  isOpening = false
   if (props.blocking) {
     setTimeout(() => {
       if (heightValue.get() < 1) {
@@ -204,8 +212,13 @@ const open = async () => {
   }
 }
 
+let isClosing = false
 const close = () => {
+  if (isClosing) return
+  
   showSheet.value = false
+  isClosing = true
+  emit('closing-started')
 
   if (props.blocking) {
     isWindowScrollLocked.value = false
@@ -220,6 +233,7 @@ const close = () => {
 
   setTimeout(() => {
     emit('closed')
+    isClosing = false
   }, props.duration)
 }