Merge pull request #132 from nicholaszuccarelli/vue3-unfinished

Fix Vue3 bug with class and style bindings on elements

lib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-easy-dnd",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "description": "Easy-DnD is a drag and drop implementation for Vue 3 that uses only standard mouse events instead of the HTML5 drag and drop API, which is [impossible to work with](https://www.quirksmode.org/blog/archives/2009/09/the_html5_drag.html). Think of it as a way to transfer data from some components to others using the mouse or support for a mouse assisted copy/cut - paste. It also allows for lists to be reordred by drag and drop.",
   "main": "./dist/vue-easy-dnd.ssr.js",
   "module": "./dist/vue-easy-dnd.esm.js",

lib/src/components/Drag.vue

@@ -1,7 +1,6 @@
 <template>
   <component
     :is="tag"
-    v-bind="$attrs"
     :class="cssClasses"
   >
     <slot v-bind="$slots['default'] || {}" />

lib/src/components/Drop.vue

@@ -1,9 +1,7 @@
 <template>
   <component
     :is="tag"
-    v-bind="$attrs"
     :class="cssClasses"
-    :style="cssStyle"
   >
     <slot v-bind="$slots['default'] || {}" />
 

lib/src/components/DropList.vue

@@ -54,7 +54,7 @@ export default {
     },
     rootProps () {
       if (this.noAnimations) {
-        return this.$attrs;
+        return {};
       }
 
       return {
@@ -142,12 +142,6 @@ export default {
         ...(this.reordering === false ? this.cssClasses : { 'dnd-drop': true })
       };
     },
-    style () {
-      if (this.reordering === false) {
-        return this.cssStyle;
-      }
-      return {};
-    },
     showDragFeedback () {
       return this.dragInProgress && this.typeAllowed && !this.reordering;
     },
@@ -430,7 +424,6 @@ export default {
       {
         ref: 'component',
         class: this.clazz,
-        style: this.style,
         ...this.rootProps
       },
       {

lib/src/components/DropMask.vue

@@ -1,5 +1,5 @@
 <template>
-  <component :is="tag" v-bind="$attrs">
+  <component :is="tag">
     <template v-for="(args, slot) of $slots" #[slot]>
       <slot :name="slot" v-bind="args" />
     </template>

lib/src/js/Grid.js

@@ -14,7 +14,7 @@ export default class Grid {
         if (index > upToIndex) break;
         const rect = child.getBoundingClientRect();
         const hasNestedDrop = child.classList.contains('dnd-drop') || child.getElementsByClassName('dnd-drop').length > 0;
-        let horizontal = null;
+        let horizontal = false;
         if (hasNestedDrop) {
           if (direction === 'auto') {
             // Auto mode not supported for now. Row or column must be defined explicitly if there are nested drop lists.

lib/src/mixins/DropMixin.js

@@ -82,9 +82,6 @@ export default {
         clazz['drop-forbidden'] = !this.dropAllowed;
       }
       return clazz;
-    },
-    cssStyle () {
-      return {};
     }
   },
   methods: {

package.json

@@ -6,6 +6,7 @@
     "serve": "vue-cli-service serve",
     "build-dev": "cd ./lib && rollup --config rollup.config.mjs",
     "build": "cd ./lib && rollup --config rollup.config.mjs --environment BUILD:production",
+    "publish": "cd ./lib && npm publish",
     "lint": "vue-cli-service lint ./src ./lib"
   },
   "dependencies": {

src/App15.vue

@@ -0,0 +1,85 @@
+<template>
+  <Page class="wrapper">
+    <div class="thebox">
+      <DropList
+        :items="items"
+        column
+        class="droplist"
+        @reorder="$event.apply(items)"
+      >
+        <template #item="{item, index}">
+          <Drag
+            :key="item"
+            handle=".handle"
+          >
+            <div
+              class="component"
+              :class="{'handle': item !== 1}"
+              :style="item === 1 ? 'height: 500px;' : 'height: 250px;'"
+            >
+              <h1>{{ item }}</h1>
+            </div>
+
+            <template #drag-image />
+          </Drag>
+        </template>
+
+        <template #feedback />
+      </DropList>
+    </div>
+  </Page>
+</template>
+
+<script>
+import Page from './components/scaffold/Page';
+
+import DropList from '../lib/src/components/DropList';
+import Drag from '../lib/src/components/Drag';
+import '../lib/src/js/DragImagesManager.js';
+
+export default {
+  name: 'App',
+  components: {
+    Page,
+    DropList,
+    Drag
+  },
+  data () {
+    return {
+      items: [0, 1],
+    };
+  },
+  methods: {
+    func (e) {
+      console.log(e);
+    },
+  },
+};
+</script>
+
+<style>
+.thebox {
+  margin: 200px;
+  height: 1024px;
+  width: 800px;
+  padding: 16px;
+  border-radius: 8px;
+  border: 2px solid black;
+}
+
+.thebox > .droplist {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.component {
+  width: 100%;
+}
+
+.component.handle {
+  border: 2px dashed orangered;
+  cursor: move;
+}
+</style>

src/main.js

@@ -1,5 +1,5 @@
 import { createApp } from 'vue';
-import App from './App.vue';
+import App from './App2.vue';
 
 import Generic from './components/Generic';