2.3.12-legacy release for older browsers

jbaysolutions · Jan 15, 2021 · 62a280b · 62a280b
1 parent 2bc042f
commit 62a280b
Show file tree

Hide file tree

Showing 10 changed files with 616 additions and 13,733 deletions.
diff --git a/dist/vue-grid-layout.common.js b/dist/vue-grid-layout.common.js
diff --git a/dist/vue-grid-layout.common.js.map b/dist/vue-grid-layout.common.js.map
diff --git a/dist/vue-grid-layout.umd.js b/dist/vue-grid-layout.umd.js
diff --git a/dist/vue-grid-layout.umd.js.map b/dist/vue-grid-layout.umd.js.map
diff --git a/dist/vue-grid-layout.umd.min.js b/dist/vue-grid-layout.umd.min.js
diff --git a/dist/vue-grid-layout.umd.min.js.map b/dist/vue-grid-layout.umd.min.js.map
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-grid-layout",
-  "version": "2.3.12",
+  "version": "2.3.12-legacy",
   "description": "A draggable and resizable grid layout, as a Vue component.",
   "keywords": [
     "grid",
@@ -28,11 +28,7 @@
   },
   "dependencies": {
     "element-resize-detector": "^1.2.1",
-    "@interactjs/interactjs": "^1.10.2",
-    "@interactjs/auto-start": "^1.10.2",
-    "@interactjs/actions": "^1.10.2",
-    "@interactjs/modifiers": "^1.10.2",
-    "@interactjs/dev-tools": "^1.10.2"
+    "interactjs": "^1.10.2"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.4.1",

diff --git a/src/components/GridItem.vue b/src/components/GridItem.vue
@@ -92,12 +92,7 @@
     import {getDocumentDir} from "@/helpers/DOM";
     //    var eventBus = require('./eventBus');
 
-    import '@interactjs/auto-start'
-    import '@interactjs/actions/drag'
-    import '@interactjs/actions/resize'
-    import '@interactjs/modifiers'
-    import '@interactjs/dev-tools'
-    import interact from '@interactjs/interact'
+    import interact from 'interactjs'
 
     export default {
         name: "GridItem",

diff --git a/test/01-basic.html b/test/01-basic.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>Vue Grid Layout Example 1 - Basic</title>
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
+    <link rel="stylesheet" href="../public/app.css">
+    <!--<link rel="stylesheet" href="../dist/vue-grid-layout.css">-->
+</head>
+<body>
+    <h1>Vue Grid Layout Example 1 - Basic</h1>
+
+    <a href="https://github.com/jbaysolutions/vue-grid-layout">View project on Github</a>
+    <br/>
+    <a href="02-events.html">Next example: Move and resize events</a>
+
+    <div id="app" style="width: 100%;">
+        <!--<pre>{{ $data | json }}</pre>-->
+        <div>
+            <div class="layoutJSON">
+                Displayed as <code>[x, y, w, h]</code>:
+                <div class="columns">
+                    <div class="layoutItem" v-for="item in layout">
+                        <b>{{item.i}}</b>: [{{item.x}}, {{item.y}}, {{item.w}}, {{item.h}}]
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div id="content">
+            <!--<button @click="decreaseWidth">Decrease Width</button>
+            <button @click="increaseWidth">Increase Width</button>
+            <button @click="addItem">Add an item</button>-->
+            <input type="checkbox" v-model="draggable"/> Draggable
+            <input type="checkbox" v-model="resizable"/> Resizable
+            <br/>
+            <grid-layout :layout="layout"
+                         :col-num="12"
+                         :row-height="30"
+                         :is-draggable="draggable"
+                         :is-resizable="resizable"
+                         :vertical-compact="true"
+                         :use-css-transforms="true"
+            >
+                <grid-item v-for="item in layout"
+                           :static="item.static"
+                           :x="item.x"
+                           :y="item.y"
+                           :w="item.w"
+                           :h="item.h"
+                           :i="item.i"
+                        >
+                    <span class="text">{{itemTitle(item)}}</span>
+                </grid-item>
+            </grid-layout>
+        </div>
+
+    </div>
+    <script src="../node_modules/vue/dist/vue.min.js"></script>
+    <script src="../dist/vue-grid-layout.umd.min.js"></script>
+    <script src="01-basic.js"></script>
+</body>
+</html>
diff --git a/test/01-basic.js b/test/01-basic.js
@@ -0,0 +1,96 @@
+var testLayout = [
+    {"x":0,"y":0,"w":2,"h":2,"i":"0", static: false},
+    {"x":2,"y":0,"w":2,"h":4,"i":"1", static: true},
+    {"x":4,"y":0,"w":2,"h":5,"i":"2", static: false},
+    {"x":6,"y":0,"w":2,"h":3,"i":"3", static: false},
+    {"x":8,"y":0,"w":2,"h":3,"i":"4", static: false},
+    {"x":10,"y":0,"w":2,"h":3,"i":"5", static: false},
+    {"x":0,"y":5,"w":2,"h":5,"i":"6", static: false},
+    {"x":2,"y":5,"w":2,"h":5,"i":"7", static: false},
+    {"x":4,"y":5,"w":2,"h":5,"i":"8", static: false},
+    {"x":6,"y":3,"w":2,"h":4,"i":"9", static: true},
+    {"x":8,"y":4,"w":2,"h":4,"i":"10", static: false},
+    {"x":10,"y":4,"w":2,"h":4,"i":"11", static: false},
+    {"x":0,"y":10,"w":2,"h":5,"i":"12", static: false},
+    {"x":2,"y":10,"w":2,"h":5,"i":"13", static: false},
+    {"x":4,"y":8,"w":2,"h":4,"i":"14", static: false},
+    {"x":6,"y":8,"w":2,"h":4,"i":"15", static: false},
+    {"x":8,"y":10,"w":2,"h":5,"i":"16", static: false},
+    {"x":10,"y":4,"w":2,"h":2,"i":"17", static: false},
+    {"x":0,"y":9,"w":2,"h":3,"i":"18", static: false},
+    {"x":2,"y":6,"w":2,"h":2,"i":"19", static: false}
+];
+
+// var GridLayout = VueGridLayout.GridLayout;
+// var GridItem = VueGridLayout.GridItem;
+
+new Vue({
+    el: '#app',
+    // components: {
+    //     "GridLayout": GridLayout,
+    //     "GridItem": GridItem
+    // },
+    data: {
+        layout: testLayout,
+        draggable: true,
+        resizable: true,
+        index: 0
+    },
+
+/*
+    mounted: function () {
+        this.index = this.layout.length;
+    },
+    */
+    methods: {
+        itemTitle: function(item) {
+            var result = item.i;
+            if (item.static) {
+                result += " - Static";
+            }
+            return result;
+        }
+/*
+        increaseWidth: function(item) {
+            var width = document.getElementById("content").offsetWidth;
+            width += 20;
+            document.getElementById("content").style.width = width+"px";
+        },
+        decreaseWidth: function(item) {
+
+            var width = document.getElementById("content").offsetWidth;
+            width -= 20;
+            document.getElementById("content").style.width = width+"px";
+        },
+        removeItem: function(item) {
+            //console.log("### REMOVE " + item.i);
+            this.layout.splice(this.layout.indexOf(item), 1);
+        },
+        addItem: function() {
+            var self = this;
+            //console.log("### LENGTH: " + this.layout.length);
+            var item = {"x":0,"y":0,"w":2,"h":2,"i":this.index+"", whatever: "bbb"};
+            this.index++;
+            this.layout.push(item);
+        }
+*/
+    }
+});
+
+/*
+function generateLayout() {
+    return _.map(_.range(0, 25), function (item, i) {
+        var y = Math.ceil(Math.random() * 4) + 1;
+        return {
+            x: _.random(0, 5) * 2 % 12,
+            y: Math.floor(i / 6) * y,
+            w: 2,
+            h: y,
+            i: i.toString(),
+            static: Math.random() < 0.05
+        };
+    });
+}*/
+
+
+