feat: add dragging events;

docs: update README;

Author: megaarmos

README.md

@@ -124,12 +124,13 @@ Assuming there is `const bottomSheet = ref()`
 
 ## Events
 
-| Event      | Description                                                                           | Example                   |
-| ---------- | ------------------------------------------------------------------------------------- | ------------------------- |
-| min-height | Fires when the minimum height of the sheet changes. Passes the value as an argument.  | `@min-height="(n) => {}"` |
-| max-height | Fires when the maximum height of the window changes. Passes the value as an argument. | `@max-height="(n) => {}"` |
-| opened     | Fires when the bottom sheet is opened                                                 | `@opened="() => {}"`      |
-| closed     | Fires when the bottom sheet is closed                                                 | `@closed="() => {}"`      |
+| Event         | Description                                                                          | Example                     |
+| ------------- | ------------------------------------------------------------------------------------ | --------------------------- |
+| min-height    | Fires when the minimum height of the sheet changes. Passes the value as an argument. | `@min-height="(n) => {}"`   |
+| dragging-up   | Fires when the bottom sheet is being dragged up                                      | `@dragging-up="() => {}"`   |
+| dragging-down | Fires when the bottom sheet is being dragged down                                    | `@dragging-down="() => {}"` |
+| opened        | Fires when the bottom sheet is opened                                                | `@opened="() => {}"`        |
+| closed        | Fires when the bottom sheet is closed                                                | `@closed="() => {}"`        |
 
 ## Acknowledgments
 

package.json

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

src/BottomSheet.vue

@@ -26,6 +26,8 @@ const emit = defineEmits<{
   (e: 'opened'): void
   (e: 'closed'): void
   (e: 'ready'): void
+  (e: 'dragging-up'): void
+  (e: 'dragging-down'): void
   (e: 'minHeight', minSheetHeight: number): void
   (e: 'maxHeight', maxSheetHeight: number): void
 }>()
@@ -147,7 +149,7 @@ const snapToPoint = (snapPoint: number) => {
   })
 }
 
-const handleDrag: Handler<'drag', PointerEvent> | undefined = ({ delta }) => {
+const handleDrag: Handler<'drag', PointerEvent> | undefined = ({ delta, direction }) => {
   if (!sheet.value) return
 
   if (translateY.value === 0) {
@@ -168,6 +170,12 @@ const handleDrag: Handler<'drag', PointerEvent> | undefined = ({ delta }) => {
   set({
     height: Math.min(Math.max(rubberbandIfOutOfBounds(height.value, 0, maxSnap.value, 0.25), 0), windowHeight.value),
   })
+
+  if (direction[1] > 0) {
+    emit('dragging-down')
+  } else if (direction[1] < 0) {
+    emit('dragging-up')
+  }
 }
 
 const handleDragEnd: Handler<'drag', PointerEvent> | undefined = () => {