Merge pull request #23 from cameronhimself/release/1.0.0

Release/1.0.0

README.md

@@ -1,3 +1,7 @@
+> ❗ Version 1.0.0 is out! This finally includes support for IE/Edge.  
+
+> Note that this required skipping the native `transferData` event property entirely in favor of a global variable that maintains the current drag transfer info. This could theoretically break some extreme edge cases involving multiple drag events occurring simultaneously, but I think it's very unlikely, or maybe even impossible. Feedback is greatly appreciated.
+
 # vue-drag-drop
 
 [![npm](https://img.shields.io/npm/v/vue-drag-drop.svg) ![npm](https://img.shields.io/npm/dm/vue-drag-drop.svg)](https://www.npmjs.com/package/vue-drag-drop)

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-drag-drop",
   "description": "A lightweight Vue wrapper that abstracts away the wonkier parts of the Drag and Drop Browser API",
-  "version": "0.2.4",
+  "version": "1.0.0",
   "author": {
     "name": "J. Cameron McDonald",
     "email": "cameronhimself@gmail.com"
@@ -56,7 +56,6 @@
     "webpack-merge": "^4.1.0"
   },
   "dependencies": {
-    "core-js": "^2.5.3",
-    "uniqid": "^4.1.1"
+    "core-js": "^2.5.3"
   }
 }

src/Drag.vue

@@ -16,11 +16,8 @@
 </template>
 
 <script>
-	import uniqid from 'uniqid';
-	import { transferDataStore } from './stores';
-	import {
-		dropEffects, effectsAllowed, events, mimeType, smuggleKeyMimeType,
-	} from './constants';
+	import transferDataStore from './transferDataStore';
+	import { dropEffects, effectsAllowed, events } from './constants';
 
 	export default {
 		props: {
@@ -35,7 +32,7 @@
 			tag: { type: String, default: 'div' },
 		},
 		data() {
-			return { id: uniqid(), dragging: false };
+			return { dragging: false };
 		},
 		computed: {
 			events: () => events,
@@ -78,9 +75,7 @@
 
 					// Set the transfer data
 					if (this.transferData !== undefined) {
-						this.$set(transferDataStore, this.id, this.transferData);
-						transfer.setData(mimeType, this.id);
-						transfer.setData(`${smuggleKeyMimeType}${this.id}`, this.id);
+						transferDataStore.data = this.transferData;
 					}
 
 					// Indicate that we're dragging.
@@ -92,7 +87,7 @@
 
 				// Clean up stored data on drag end after emitting.
 				if (name === events.dragend) {
-					this.$delete(transferDataStore, this.id);
+					transferDataStore.data = undefined;
 					this.dragging = false;
 				}
 			},

src/Drop.vue

@@ -5,52 +5,32 @@
 		@dragover.prevent="emitEvent(events.dragover, $event)"
 		@drop="emitEvent(events.drop, $event)"
 	>
-		<slot :transfer-data="transferData"></slot>
+		<slot :transfer-data="scopedData"></slot>
 	</component>
 </template>
 
 <script>
-	import { transferDataStore } from './stores';
-	import { events, mimeType, mimeDelimiter, smuggleKeyMimeType } from './constants';
+	import transferDataStore from './transferDataStore';
+	import { events } from './constants';
 
 	const insideElements = new Set();
 
 	export default {
+		data() {
+			return { transferData: undefined, isDraggingOver: false };
+		},
 		props: {
 			tag: { type: String, default: 'div' },
 		},
-		data: () => ({ dataKey: null }),
 		computed: {
 			events: () => events,
-			transferDataStore: () => transferDataStore,
-			transferData() {
-				return this.transferDataStore[this.dataKey];
+			scopedData() {
+				return this.isDraggingOver && this.transferData;
 			},
 		},
 		methods: {
 			emitEvent(name, nativeEvent) {
-				// Before emitting the event, set the transfer data.
-				if (name === events.drop) {
-					this.dataKey = nativeEvent.dataTransfer.getData(mimeType);
-				} else {
-					if (! this.dataKey) {
-						// DOMStringList to array
-						const types = nativeEvent.dataTransfer.types;
-						const typesArray = [];
-						for (let i = types.length >>> 0; i--;) {
-							typesArray[i] = types[i];
-						}
-
-						const type = typesArray.find(
-							t => t.startsWith(smuggleKeyMimeType)
-						);
-						if (type) {
-							this.dataKey = type.split(mimeDelimiter)[1];
-						}
-					}
-				}
-
-				// Emit
+				this.transferData = transferDataStore.data;
 				this.$emit(name, this.transferData, nativeEvent);
 
 				/**
@@ -69,18 +49,15 @@
 				// Remove from the set on dragleave.
 				if (name === events.dragleave) {
 					insideElements.delete(nativeEvent.target);
-
-					// If we're no longer inside any elements, delete data.
-					if (! insideElements.size) {
-						this.dataKey = null;
-					}
 				}
 
 				// A drop resets everything.
 				if (name === events.drop) {
-				  this.dataKey = null;
-				  insideElements.clear();
+					insideElements.clear();
 				}
+
+				// Finally, since Vue can't react to Set changes, set a flag indicating drag status.
+				this.isDraggingOver = Boolean(insideElements.size);
 			},
 		},
 	};

src/constants.js

@@ -1,8 +1,5 @@
 const keyMirror = keys => keys.reduce((acc, k) => (acc[k] = k) && acc, {});
 
-export const mimeType = 'text/x-vue-drag-drop-key';
-export const mimeDelimiter = ':';
-export const smuggleKeyMimeType = `${mimeType}${mimeDelimiter}`;
 export const events = keyMirror([
 	'drag', 'dragend',  'dragenter', 'dragleave', 'dragstart', 'dragover', 'drop',
 ]);

src/transferDataStore.js

@@ -0,0 +1 @@
+export default { data: undefined };