migration to vue-cli done, code cleanup

gmsa · gmsa · commit 693b891dec6a · 2018-09-07T15:15:56.000+01:00
diff --git a/examples/01-basic.html b/examples/01-basic.html
@@ -5,6 +5,7 @@
     <title>Vue Grid Layout Example 1 - Basic Responsive</title>
     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
     <link rel="stylesheet" href="app.css">
+    <link rel="stylesheet" href="../dist/vue-grid-layout.css">
 </head>
 <body>
     <h1>Vue Grid Layout Example 1 - Basic</h1>
@@ -54,7 +55,7 @@ <h1>Vue Grid Layout Example 1 - Basic</h1>
 
     </div>
     <script src="vue.min.js"></script>
-    <script src="../dist/vue-grid-layout.min.js"></script>
+    <script src="../dist/vue-grid-layout.umd.min.js"></script>
     <script src="01-basic.js"></script>
 </body>
 </html>
diff --git a/examples/01-basic.js b/examples/01-basic.js
@@ -26,15 +26,8 @@ var testLayout = [
 Vue.config.debug = true;
 Vue.config.devtools = true;
 
-var GridLayout = VueGridLayout.GridLayout;
-var GridItem = VueGridLayout.GridItem;
-
 new Vue({
     el: '#app',
-    components: {
-		"GridLayout": GridLayout,
-		"GridItem": GridItem
-    },
     data: {
         layout: testLayout,
         draggable: true,
diff --git a/examples/02-events.html b/examples/02-events.html
@@ -5,6 +5,7 @@
     <title>Vue Grid Layout Example 1 - Basic Responsive</title>
     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
     <link rel="stylesheet" href="app.css">
+    <link rel="stylesheet" href="../dist/vue-grid-layout.css">
 </head>
 <body>
     <h1>Vue Grid Layout Example 2 - Move and resize events</h1>
@@ -64,7 +65,7 @@ <h1>Vue Grid Layout Example 2 - Move and resize events</h1>
 
     </div>
     <script src="vue.min.js"></script>
-    <script src="../dist/vue-grid-layout.min.js"></script>
+    <script src="../dist/vue-grid-layout.umd.min.js"></script>
     <script src="02-events.js"></script>
 </body>
 </html>
diff --git a/examples/02-events.js b/examples/02-events.js
@@ -26,15 +26,8 @@ var testLayout = [
 Vue.config.debug = true;
 Vue.config.devtools = true;
 
-var GridLayout = VueGridLayout.GridLayout;
-var GridItem = VueGridLayout.GridItem;
-
 new Vue({
     el: '#app',
-    components: {
-        "GridLayout": GridLayout,
-        "GridItem": GridItem
-    },
     data: {
         layout: testLayout,
         index: 0,
@@ -53,13 +46,19 @@ new Vue({
             console.log(msg);
 
         },
-        resizeEvent: function(i, newH, newW){
-            var msg = "RESIZE i=" + i + ", H=" + newH + ", W=" + newW;
+        movedEvent: function(i, newX, newY){
+            var msg = "MOVED i=" + i + ", X=" + newX + ", Y=" + newY;
+            this.eventLog.push(msg);
+            console.log(msg);
+
+        },
+        resizeEvent: function(i, newH, newW, newHPx, newWPx){
+            var msg = "RESIZE i=" + i + ", H=" + newH + ", W=" + newW + ", H(px)=" + newHPx + ", W(px)=" + newWPx;
             this.eventLog.push(msg);
             console.log(msg);
         },
-        movedEvent: function(i, newX, newY){
-            var msg = "MOVED i=" + i + ", X=" + newX + ", Y=" + newY;
+        resizedEvent: function(i, newX, newY, newHPx, newWPx){
+            var msg = "RESIZED i=" + i + ", X=" + newX + ", Y=" + newY + ", H(px)=" + newHPx + ", W(px)=" + newWPx;
             this.eventLog.push(msg);
             console.log(msg);
 
diff --git a/examples/03-multiple-grids.html b/examples/03-multiple-grids.html
@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <title>Vue Grid Layout Example 3 - Multiple grids</title>
     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
+    <link rel="stylesheet" href="../dist/vue-grid-layout.css">
     <link rel="stylesheet" href="app.css">
 </head>
 <body>
@@ -81,21 +82,10 @@ <h3>Grid 2</h3>
 </div>
 
 <script src="vue.min.js"></script>
-<script src="../dist/vue-grid-layout.min.js"></script>
+<script src="../dist/vue-grid-layout.umd.min.js"></script>
 <script type="text/javascript">
-    Vue.config.debug = true;
-    Vue.config.devtools = true;
-
-    var GridLayout = VueGridLayout.GridLayout;
-    var GridItem = VueGridLayout.GridItem;
-
-
     new Vue({
         el: '#app1',
-        components: {
-            GridLayout,
-            GridItem,
-        },
         data: {
             layout: [
                 {"x":0,"y":0,"w":2,"h":2,"i":"0"},
@@ -107,10 +97,6 @@ <h3>Grid 2</h3>
 
     new Vue({
         el: '#app2',
-        components: {
-            GridLayout,
-            GridItem,
-        },
         data: {
             layout: [
                 {"x":0,"y":0,"w":2,"h":2,"i":"0"},
diff --git a/examples/04-allow-ignore.html b/examples/04-allow-ignore.html
@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <title>Vue Grid Layout Example 4 - Drag allow/ignore elements</title>
     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
+    <link rel="stylesheet" href="../dist/vue-grid-layout.css">
     <link rel="stylesheet" href="app.css">
 </head>
 <body>
@@ -66,21 +67,10 @@ <h1>Vue Grid Layout Example 4 - Drag allow/ignore elements</h1>
 </div>
 
 <script src="vue.min.js"></script>
-<script src="../dist/vue-grid-layout.min.js"></script>
+<script src="../dist/vue-grid-layout.umd.min.js"></script>
 <script type="text/javascript">
-    Vue.config.debug = true;
-    Vue.config.devtools = true;
-
-    var GridLayout = VueGridLayout.GridLayout;
-    var GridItem = VueGridLayout.GridItem;
-
-
     new Vue({
         el: '#app',
-        components: {
-            GridLayout,
-            GridItem,
-        },
         data: {
             layout: [
                 {"x":0,"y":0,"w":2,"h":2,"i":"0"},
diff --git a/examples/05-mirrored.html b/examples/05-mirrored.html
@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <title>Vue Grid Layout Example 4 - Mirrored grid layout</title>
     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
+    <link rel="stylesheet" href="../dist/vue-grid-layout.css">
     <link rel="stylesheet" href="app.css">
 </head>
 <body>
@@ -57,7 +58,7 @@ <h1>Vue Grid Layout Example 5 - Mirrored grid layout</h1>
 
 </div>
 <script src="vue.min.js"></script>
-<script src="../dist/vue-grid-layout.min.js"></script>
+<script src="../dist/vue-grid-layout.umd.min.js"></script>
 <script type="text/javascript">
     const testLayout = [
         {"x":0,"y":0,"w":2,"h":2,"i":"0"},
@@ -82,18 +83,8 @@ <h1>Vue Grid Layout Example 5 - Mirrored grid layout</h1>
         {"x":2,"y":6,"w":2,"h":2,"i":"19"}
     ];
 
-    Vue.config.debug = true;
-    Vue.config.devtools = true;
-
-    const GridLayout = VueGridLayout.GridLayout;
-    const GridItem = VueGridLayout.GridItem;
-
     new Vue({
         el: '#app',
-        components: {
-            "GridLayout": GridLayout,
-            "GridItem": GridItem
-        },
         data: {
             layout: testLayout,
             draggable: true,
diff --git a/examples/app.css b/examples/app.css
@@ -31,7 +31,7 @@
 
 
 
-.vue-resizable-handle {
+/*.vue-resizable-handle {
     z-index: 5000;
     position: absolute;
     width: 20px;
@@ -45,7 +45,7 @@
     background-origin: content-box;
     box-sizing: border-box;
     cursor: se-resize;
-}
+}*/
 
 .vue-grid-item:not(.vue-grid-placeholder) {
     background: #ccc;
diff --git a/package.json b/package.json
@@ -21,7 +21,7 @@
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "build-bundle": "vue-cli-service build --target lib --name vue-grid-layout ./src/components/index.js",
+    "build-bundle": "vue-cli-service build --target lib ./src/components/index.js",
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
diff --git a/src/App.vue b/src/App.vue
@@ -6,7 +6,7 @@
             <div class="layoutJSON">
                 Displayed as <code>[x, y, w, h]</code>:
                 <div class="columns">
-                    <div class="layoutItem" v-for="item in layout">
+                    <div class="layoutItem" v-for="item in layout" :key="item.i">
                         <b>{{item.i}}</b>: [{{item.x}}, {{item.y}}, {{item.w}}, {{item.h}}]
                     </div>
                 </div>
@@ -146,14 +146,13 @@
             clicked: function() {
                 window.alert("CLICK!");
             },
-            increaseWidth: function(item) {
-                var width = document.getElementById("content").offsetWidth;
+            increaseWidth: function() {
+                let width = document.getElementById("content").offsetWidth;
                 width += 20;
                 document.getElementById("content").style.width = width+"px";
             },
-            decreaseWidth: function(item) {
-
-                var width = document.getElementById("content").offsetWidth;
+            decreaseWidth: function() {
+                let width = document.getElementById("content").offsetWidth;
                 width -= 20;
                 document.getElementById("content").style.width = width+"px";
             },
@@ -162,14 +161,14 @@
                 this.layout.splice(this.layout.indexOf(item), 1);
             },
             addItem: function() {
-                let self = this;
+                // let self = this;
                 //console.log("### LENGTH: " + this.layout.length);
                 let item = {"x":0,"y":0,"w":2,"h":2,"i":this.index+"", whatever: "bbb"};
                 this.index++;
                 this.layout.push(item);
             },
             move: function(i, newX, newY){
-                // console.log("MOVE i=" + i + ", X=" + newX + ", Y=" + newY);
+                console.log("MOVE i=" + i + ", X=" + newX + ", Y=" + newY);
             },
             resize: function(i, newH, newW, newHPx, newWPx){
                 console.log("RESIZE i=" + i + ", H=" + newH + ", W=" + newW + ", H(px)=" + newHPx + ", W(px)=" + newWPx);
diff --git a/src/components/GridItem.vue b/src/components/GridItem.vue
@@ -81,8 +81,8 @@
     }
 </style>
 <script>
-    import {setTopLeft, setTopRight, setTransformRtl, setTransform, createMarkup, getLayoutItem} from '../helpers/utils';
-    import {getControlPosition, offsetXYFromParentOf, createCoreData} from '../helpers/draggableUtils';
+    import {setTopLeft, setTopRight, setTransformRtl, setTransform} from '../helpers/utils';
+    import {getControlPosition, createCoreData} from '../helpers/draggableUtils';
     import {getDocumentDir} from "../helpers/DOM";
     //    var eventBus = require('./eventBus');
 
@@ -251,7 +251,7 @@
                 self.rowHeight = rowHeight;
             };
 
-            self.directionchangeHandler = (direction) => {
+            self.directionchangeHandler = () => {
                 this.rtl = getDocumentDir();
                 this.compact();
             };
@@ -436,7 +436,7 @@
                 const newSize = {width: 0, height: 0};
                 let pos;
                 switch (event.type) {
-                    case "resizestart":
+                    case "resizestart": {
                         this.previousW = this.innerW;
                         this.previousH = this.innerH;
                         pos = this.calcPosition(this.innerX, this.innerY, this.innerW, this.innerH);
@@ -445,7 +445,8 @@
                         this.resizing = newSize;
                         this.isResizing = true;
                         break;
-                    case "resizemove":
+                    }
+                    case "resizemove": {
 //                        console.log("### resize => " + event.type + ", lastW=" + this.lastW + ", lastH=" + this.lastH);
                         const coreEvent = createCoreData(this.lastW, this.lastH, x, y);
                         if (this.renderRtl) {
@@ -458,7 +459,8 @@
                         ///console.log("### resize => " + event.type + ", deltaX=" + coreEvent.deltaX + ", deltaY=" + coreEvent.deltaY);
                         this.resizing = newSize;
                         break;
-                    case "resizeend":
+                    }
+                    case "resizeend": {
                         //console.log("### resize end => x=" +this.innerX + " y=" + this.innerY + " w=" + this.innerW + " h=" + this.innerH);
                         pos = this.calcPosition(this.innerX, this.innerY, this.innerW, this.innerH);
                         newSize.width = pos.width;
@@ -467,6 +469,7 @@
                         this.resizing = null;
                         this.isResizing = false;
                         break;
+                    }
                 }
 
                 // Get new WH
@@ -511,10 +514,10 @@
                 if (position === null) return; // not possible but satisfies flow
                 const {x, y} = position;
 
-                let shouldUpdate = false;
-                const newPosition = {top: 0, left: 0};
+                // let shouldUpdate = false;
+                let newPosition = {top: 0, left: 0};
                 switch (event.type) {
-                    case "dragstart":
+                    case "dragstart": {
                         this.previousX = this.innerX;
                         this.previousY = this.innerY;
 
@@ -529,10 +532,11 @@
                         this.dragging = newPosition;
                         this.isDragging = true;
                         break;
-                    case "dragend":
+                    }
+                    case "dragend": {
                         if (!this.isDragging) return;
-                        parentRect = event.target.offsetParent.getBoundingClientRect();
-                        clientRect = event.target.getBoundingClientRect();
+                        let parentRect = event.target.offsetParent.getBoundingClientRect();
+                        let clientRect = event.target.getBoundingClientRect();
 //                        Add rtl support
                         if (this.renderRtl) {
                             newPosition.left = (clientRect.right - parentRect.right) * -1;
@@ -544,9 +548,10 @@
 //                        console.log("### DROP: " + JSON.stringify(newPosition));
                         this.dragging = null;
                         this.isDragging = false;
-                        shouldUpdate = true;
+                        // shouldUpdate = true;
                         break;
-                    case "dragmove":
+                    }
+                    case "dragmove": {
                         const coreEvent = createCoreData(this.lastX, this.lastY, x, y);
 //                        Add rtl support
                         if (this.renderRtl) {
@@ -560,6 +565,7 @@
 //                        console.log("### drag end => " + JSON.stringify(newPosition));
                         this.dragging = newPosition;
                         break;
+                    }
                 }
 
                 // Get new XY
diff --git a/src/components/GridLayout.vue b/src/components/GridLayout.vue
@@ -139,7 +139,7 @@
                         const erd = elementResizeDetectorMaker({
                             strategy: "scroll" //<- For ultra performance.
                         });
-                        erd.listenTo(self.$refs.item, function (element) {
+                        erd.listenTo(self.$refs.item, function () {
                             self.onWindowResize();
                         });
                     });
@@ -188,7 +188,7 @@
                     const erd = elementResizeDetectorMaker({
                         strategy: "scroll" //<- For ultra performance.
                     });
-                    erd.listenTo(self.$refs.item, function (element) {
+                    erd.listenTo(self.$refs.item, function () {
                         self.onWindowResize();
                     });
                 });
diff --git a/src/components/index.js b/src/components/index.js
diff --git a/src/helpers/utils.js b/src/helpers/utils.js
diff --git a/vue.config.js b/vue.config.js
