Release 1.2.0

Release 1.2.0

CHANGELOG.md

@@ -4,7 +4,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [Unreleased]
+## [1.2.0]
+### Added
+- Added couple of new event emitters `dropInOriginalBucket` and `dropInDestinationBucket`.
+- Added more documentation for events in the README.
+
+## [1.1.0]
 ### Changed
 - Changed the css class name to be more specific to the component
 - Changed the css value to make the cards not tilt

README.md

@@ -34,6 +34,8 @@ yarn add vue-drag-n-drop
       :inPlace="true"
       :enableSave="true"
       :enableCancel="true"
+      @dropInOriginalBucket="originalBucketDropEvent"
+      @dropInDestinationBucket="destinationBucketDropEvent"
       @save="save"
       @cancel="cancel"
     >
@@ -166,6 +168,30 @@ To put the component in your code, you can simply run `import DragDrop from 'vue
 
 When you pass your own objects instead of a list of string, you also need to provide a custom component to handle view/action of this object since you can virtually pass any kind of object. 
 
+#### Events
+When you use the component, you can also listen to some events that happen inside the component like drag, drop, save and cancel
+
+```html
+<drag-drop
+  :dropzones="dropGroups"
+  :dropzonesTitle="'XYZ Company Teams'"
+  :originalData="stories"
+  :originalTitle="'Tasks to be distributed'"
+  @dropInOriginalBucket="originalBucketDropEvent"
+  @dropInDestinationBucket="destinationBucketDropEvent"
+  @save="save"
+  @cancel="cancel"
+/>
+```
+
+`save` - This event is triggered when you click save from inside the component. It gives back the final state of the data in corresponding buckets.
+
+`cancel` - This gives you a choice on how to handle the cancellationn event.
+
+`dropInOriginalBucket` - This event is emitted everytime there is a drop event for original bucket. You provides an object with `startIndex`, `endIndex` and `payload`.
+
+`dropInDestinationBucket` - This event is emitted for each dropzone in the destination bucket. First parameter returns the dropzone name and second parameter returns the drop info `startIndex`, `endIndex` and `payload`.
+
 #### Custom Component for list of objects
 `vue-drag-n-drop` uses Vue Named Slots. So, the users can pass in custom component that will have access to the data for the single item. You can impolement the slots like below:
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-drag-n-drop",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "private": false,
   "description": "A simple kanban board where the items can be dragged and dropped from the list. This is a hybrid implementation of vue-smooth-dnd.",
   "scripts": {

src/App.vue

@@ -14,6 +14,8 @@
       :inPlace="true"
       :enableSave="true"
       :enableCancel="true"
+      @dropInOriginalBucket="originalBucketDropEvent"
+      @dropInDestinationBucket="destinationBucketDropEvent"
       @save="save"
       @cancel="cancel"
     >
@@ -98,8 +100,16 @@ export default {
       alert(data.title);
     },
 
-    cancel() {
+    originalBucketDropEvent(result) {
+      console.log("Original: ", result);
+    },
 
+    destinationBucketDropEvent(columnName, result) {
+      console.log("Destination: ", columnName, result)
+    },
+
+    cancel() {
+      console.log("Cancel hit");
     }
   }
 }

src/vue-drag-n-drop.vue

@@ -101,6 +101,7 @@ export default {
     */
     onDrop(dropResult){
       this.items = this.applyDrag(this.items, dropResult);
+      this.$emit('dropInOriginalBucket', dropResult);
     },
 
     /** 
@@ -122,6 +123,8 @@ export default {
           found.children.splice(dropResult.addedIndex, 0, dropResult.payload);
         }
       }
+
+      this.$emit('dropInDestinationBucket', columnId, dropResult);
     },
 
     /**