diff --git a/README.md b/README.md index 77afc1f..a6ed44d 100644 --- a/README.md +++ b/README.md @@ -28,7 +28,7 @@ Vue component of Shopify draggable. npm: ```bash -npm install vue-shopify-draggable +npm install vue-shopify-draggable # peer dependencies npm install vue @shopify/draggable ``` @@ -211,7 +211,7 @@ Example
diff --git a/src/droppable/Droppable.js b/src/droppable/Droppable.js index e053a3a..94da05a 100644 --- a/src/droppable/Droppable.js +++ b/src/droppable/Droppable.js @@ -1,7 +1,7 @@ import { Droppable } from '@shopify/draggable'; import draggableMixin from '../draggable-mixin'; -const events = ['droppable:dropped', 'droppable:returned']; +const events = ['droppable:start', 'droppable:dropped', 'droppable:returned', 'droppable:stop']; export default { name: 'VueDroppable', diff --git a/src/droppable/tests/Droppable.test.js b/src/droppable/tests/Droppable.test.js index bbaa6db..bb07648 100644 --- a/src/droppable/tests/Droppable.test.js +++ b/src/droppable/tests/Droppable.test.js @@ -44,6 +44,48 @@ describe('Droppable', () => { }); describe('events', () => { + it('droppable:start', async () => { + const spy = jasmine.createSpy('droppable:start'); + vueInstance = new Vue({ + el, + template: ` + + +
+
+ draggable-source-1 +
+
+
+ +
+
+
+ `, + data() { + return { + options: { + draggable: '.item', + dropzone: '.dropzone', + }, + }; + }, + methods: { + func(e) { + expect(e.constructor.name).toBe(Droppable.DroppableStartEvent.name); + spy(); + }, + }, + }); + + await drag({ + from: vueInstance.$refs.item, + to: vueInstance.$refs.dropzone2, + }); + + expect(spy).toHaveBeenCalledTimes(1); + }); + it('droppable:dropped', async () => { const spy = jasmine.createSpy('droppable:dropped'); vueInstance = new Vue({ @@ -129,5 +171,47 @@ describe('Droppable', () => { expect(spy).toHaveBeenCalledTimes(1); }); + + it('droppable:stop', async () => { + const spy = jasmine.createSpy('droppable:stop'); + vueInstance = new Vue({ + el, + template: ` + + +
+
+ draggable-source-1 +
+
+
+ +
+
+
+ `, + data() { + return { + options: { + draggable: '.item', + dropzone: '.dropzone', + }, + }; + }, + methods: { + func(e) { + expect(e.constructor.name).toBe(Droppable.DroppableStopEvent.name); + spy(); + }, + }, + }); + + await drag({ + from: vueInstance.$refs.item, + to: vueInstance.$refs.dropzone2, + }); + + expect(spy).toHaveBeenCalledTimes(1); + }); }); });