Added capture modifier (@move.capture) support for onMove event (#56)

* Added capture modifier support onMove event
* Added type to build project
* Add comment on `attrs`
* Added passing arguments on capture method
* Updated README.md

Co-authored-by: Max Leiter <[email protected]>

README.md

@@ -90,6 +90,7 @@ You can listen to Sortable events by adding the listeners to the `Sortable` comp
   @remove="(event: Sortable.SortableEvent) => void"
   @filter="(event: Sortable.SortableEvent) => void"
   @move="(event: Sortable.MoveEvent, event2: Event) => void"
+  @move.capture="(event: Sortable.MoveEvent, event2: Event) => boolean | -1 | 1"
   @clone="(event: Sortable.SortableEvent) => void"
 >
 ```

src/components/Sortable.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, PropType, watch, onUnmounted, computed } from "vue";
+import { ref, PropType, watch, onUnmounted, computed, useAttrs } from "vue";
 import Sortable, { SortableOptions } from "sortablejs";
 import type { AutoScrollOptions } from "sortablejs/plugins";
 
@@ -63,6 +63,8 @@ const emit = defineEmits<{
   (eventName: "change", evt: Sortable.SortableEvent): void;
 }>();
 
+const attrs = useAttrs()
+
 const containerRef = ref<HTMLElement | null>(null);
 const sortable = ref<Sortable | null>(null);
 const getKey = computed(() => {
@@ -84,7 +86,8 @@ watch(containerRef, (newDraggable) => {
       onSort: (event) => emit("sort", event),
       onRemove: (event) => emit("remove", event),
       onFilter: (event) => emit("filter", event),
-      onMove: (event, originalEvent) => emit("move", event, originalEvent),
+      // See https://github.com/MaxLeiter/sortablejs-vue3/pull/56 for context on `attrs`.
+      onMove: (event, originalEvent) => "onMoveCapture" in attrs ? (<(event: Sortable.MoveEvent, originalEvent: Event) => void>attrs.onMoveCapture)(event, originalEvent) : emit("move", event, originalEvent),
       onClone: (event) => emit("clone", event),
       onChange: (event) => emit("change", event),
     });