bump interact.js to 1.10.0 and changes imports to use tree shaking (taye/interact.js#800)

Author: gmsa

package.json

@@ -27,8 +27,12 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "element-resize-detector": "^1.1.15",
-    "interactjs": "^1.9.22"
+    "element-resize-detector": "^1.2.1",
+    "@interactjs/interactjs": "^1.10.0",
+    "@interactjs/auto-start": "^1.10.0",
+    "@interactjs/actions": "^1.10.0",
+    "@interactjs/modifiers": "^1.10.0",
+    "@interactjs/dev-tools": "^1.10.0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.4.1",
@@ -41,6 +45,6 @@
     "sass-loader": "^7.0.1",
     "vue": "^2.6.12",
     "vue-template-compiler": "^2.6.12",
-    "webpack-bundle-analyzer": "^3.4.1"
+    "webpack-bundle-analyzer": "^3.9.0"
   }
 }

src/App.vue

@@ -62,6 +62,8 @@
                            :w="item.w"
                            :h="item.h"
                            :i="item.i"
+                           :min-w="item.minW"
+                           :max-w="item.maxW"
                            :min-x="item.minX"
                            :max-x="item.maxX"
                            :min-y="item.minY"
@@ -117,7 +119,7 @@
     let testLayout = [
         {"x":0,"y":0,"w":2,"h":2,"i":"0", resizable: true, draggable: true, static: false, minY: 0, maxY: 2},
         {"x":2,"y":0,"w":2,"h":4,"i":"1", resizable: null, draggable: null, static: true},
-        {"x":4,"y":0,"w":2,"h":5,"i":"2", resizable: false, draggable: false, static: false, minX: 4, maxX: 4},
+        {"x":4,"y":0,"w":2,"h":5,"i":"2", resizable: false, draggable: false, static: false, minX: 4, maxX: 4, minW: 2, maxW: 2},
         {"x":6,"y":0,"w":2,"h":3,"i":"3", resizable: false, draggable: false, static: false},
         {"x":8,"y":0,"w":2,"h":3,"i":"4", resizable: false, draggable: false, static: false},
         {"x":10,"y":0,"w":2,"h":3,"i":"5", resizable: false, draggable: false, static: false},
@@ -193,7 +195,7 @@
             addItemDynamically: function() {
                 let item = {
                   x: (this.layout.length * 2) % (this.colNum || 12),
-                  y: this.layout.length + (this.colNum || 12), 
+                  y: this.layout.length + (this.colNum || 12),
                   w: 2,
                   h: 2,
                   i: this.index+"",

src/components/GridItem.vue

@@ -86,12 +86,17 @@
     }
 </style>
 <script>
-    import {setTopLeft, setTopRight, setTransformRtl, setTransform} from '../helpers/utils';
-    import {getControlPosition, createCoreData} from '../helpers/draggableUtils';
-    import {getDocumentDir} from "../helpers/DOM";
+    import {setTopLeft, setTopRight, setTransformRtl, setTransform} from '@/helpers/utils';
+    import {getControlPosition, createCoreData} from '@/helpers/draggableUtils';
+    import {getDocumentDir} from "@/helpers/DOM";
     //    var eventBus = require('./eventBus');
 
-    let interact = require("interactjs");
+    import '@interactjs/auto-start'
+    import '@interactjs/actions/drag'
+    import '@interactjs/actions/resize'
+    import '@interactjs/modifiers'
+    import '@interactjs/dev-tools'
+    import interact from '@interactjs/interact'
 
     export default {
         name: "GridItem",

src/components/GridLayout.vue

@@ -18,14 +18,14 @@
 </style>
 <script>
     import Vue from 'vue';
-    var elementResizeDetectorMaker = require("element-resize-detector");
+    const elementResizeDetectorMaker = require("element-resize-detector");
 
-    import {bottom, compact, getLayoutItem, moveElement, validateLayout, cloneLayout, getAllCollisions} from '../helpers/utils';
-    import {getBreakpointFromWidth, getColsFromBreakpoint, findOrGenerateResponsiveLayout} from "../helpers/responsiveUtils";
+    import {bottom, compact, getLayoutItem, moveElement, validateLayout, cloneLayout, getAllCollisions} from '@/helpers/utils';
+    import {getBreakpointFromWidth, getColsFromBreakpoint, findOrGenerateResponsiveLayout} from "@/helpers/responsiveUtils";
     //var eventBus = require('./eventBus');
 
     import GridItem from './GridItem.vue'
-    import {addWindowEventListener, removeWindowEventListener} from "../helpers/DOM";
+    import {addWindowEventListener, removeWindowEventListener} from "@/helpers/DOM";
 
     export default {
         name: "GridLayout",