feat: add event when scrolling🔧(#13)

* feat: add event when scrolling

.gitignore

@@ -9,7 +9,6 @@ lerna-debug.log*
 
 node_modules
 .DS_Store
-dist
 dist-ssr
 coverage
 *.local

README.md

@@ -73,6 +73,7 @@ Priority: disablechild > drag-scroller-disable > onlyX > onlyY
 |--|--|
 | startScroll | Trigger when start scroll |
 | endScroll | Trigger when end scroll |
+| onScrolling | Trigger when drag and move mouse |
 #### Example
 ```javascript
 <script setup>

dist/declarations/index.d.ts

@@ -0,0 +1,22 @@
+import { App, DirectiveBinding } from 'vue';
+interface ICustomBinding extends DirectiveBinding {
+    value: {
+        startScroll?: (e: MouseEvent) => void;
+        endScroll?: (e: MouseEvent) => void;
+        onScrolling?: (e: MouseEvent) => void;
+    };
+    modifiers: {
+        disablechild?: boolean;
+        onlyX?: boolean;
+        onlyY?: boolean;
+    };
+}
+declare const statefullDirective: {
+    mounted(elem: HTMLElement, binding: ICustomBinding): void;
+    unmounted(elem: HTMLElement): void;
+};
+declare const VueDragScroller: {
+    install(app: App): void;
+};
+export { statefullDirective as dragScroller };
+export default VueDragScroller;

dist/vue-drag-scroller.es.js

@@ -0,0 +1,43 @@
+const p = "drag-scroller-disable", v = /* @__PURE__ */ (() => {
+  const n = /* @__PURE__ */ new WeakMap();
+  return {
+    mounted(r, e) {
+      let o = !1;
+      const { onlyX: l, onlyY: f, disablechild: i } = e.modifiers, d = (t) => {
+        if (i)
+          return t === r;
+        for (; t && t.parentNode; ) {
+          if (t && (t != null && t.hasAttribute(p)))
+            return !1;
+          if (t === r)
+            return !0;
+          t = t.parentNode;
+        }
+        return !1;
+      }, s = (t) => {
+        var a;
+        o = d(t.target), o && ((a = e.value) != null && a.startScroll) && typeof e.value.startScroll == "function" && e.value.startScroll(t);
+      }, c = (t) => {
+        var a;
+        o && ((a = e.value) != null && a.endScroll) && typeof e.value.endScroll == "function" && e.value.endScroll(t), o = !1;
+      }, u = (t) => {
+        if (!o)
+          return !1;
+        e.value.onScrolling && typeof e.value.onScrolling == "function" && e.value.onScrolling(t), t.stopPropagation && t.stopPropagation(), t.preventDefault && t.preventDefault(), t.cancelBubble = !0, t.returnValue = !1, l ? r.scrollLeft -= t.movementX : (f || (r.scrollLeft -= t.movementX), r.scrollTop -= t.movementY);
+      };
+      n.set(r, { dragStart: s, dragEnd: c, drag: u }), r.addEventListener("pointerdown", s), addEventListener("pointerup", c), addEventListener("pointermove", u);
+    },
+    unmounted(r) {
+      const { dragStart: e, dragEnd: o, drag: l } = n.get(r);
+      r.removeEventListener("pointerdown", e), removeEventListener("pointerup", o), removeEventListener("pointermove", l);
+    }
+  };
+})(), S = {
+  install(n) {
+    n.directive("drag-scroller", v);
+  }
+};
+export {
+  S as default,
+  v as dragScroller
+};

example/App.vue

@@ -5,9 +5,13 @@ const onScroll = (e: Event) => {
 const onEndScroll = (e: Event) => {
   console.log("end scroll" ,e);
 };
+const onScrolling = (e: Event) => {
+  console.log("scrolling" ,e);
+};
 const options = {
   startScroll: onScroll,
   endScroll: onEndScroll,
+  onScrolling: onScrolling,
 };
 </script>
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-drag-scroller",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "type": "module",
   "license": "MIT",
   "description": "A vue directive that helps you scroll in a more natural way.",
@@ -20,7 +20,7 @@
     "deploy": "gh-pages -d server",
     "build-only": "run-p type-check \"build-only {@}\" --",
     "preview": "vite preview --mode app",
-    "build-lib": "vue-tsc --noEmit && vite build --mode lib",
+    "build-lib": "vue-tsc --noEmit && vite build --mode lib && npm run define",
     "build-app": "vue-tsc --noEmit && vite build --mode app",
     "type-check": "vue-tsc --noEmit --build --force",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",

src/index.ts

@@ -6,6 +6,7 @@ interface ICustomBinding extends DirectiveBinding {
   value: {
     startScroll?: (e: MouseEvent) => void
     endScroll?: (e: MouseEvent) => void
+    onScrolling?: (e: MouseEvent) => void
   }
   modifiers: {
     disablechild?: boolean
@@ -61,6 +62,10 @@ const statefullDirective = (() => {
 
       const drag = (ev: MouseEvent): any => {
         if (!isDrag) return false
+
+        if (binding.value.onScrolling && typeof binding.value.onScrolling === 'function') {
+          binding.value.onScrolling(ev)
+        }
         // prevent text selection when mouse move
         if (ev.stopPropagation) ev.stopPropagation()
         if (ev.preventDefault) ev.preventDefault()

yarn.lock

@@ -1745,7 +1745,7 @@ validate-npm-package-license@^3.0.4:
     fsevents "~2.3.3"
 
 "vue-drag-scroller@file:":
-  version "1.2.0"
+  version "1.4.0"
   resolved "file:"
   dependencies:
     vue "^3.3.11"