[dump]: 0.3.0

GopherJ · Jun 30, 2019 · 9df7f8f · 9df7f8f
1 parent 2703036
commit 9df7f8f
Show file tree

Hide file tree

Showing 6 changed files with 158 additions and 99 deletions.
diff --git a/dist/LayoutGrid.js b/dist/LayoutGrid.js
diff --git a/dist/LayoutGrid.min.js b/dist/LayoutGrid.min.js
diff --git a/dist/LayoutGrid.min.js.map b/dist/LayoutGrid.min.js.map
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-layout-grid",
-  "version": "0.2.9",
+  "version": "0.3.0",
   "description": "layout gridster with vue",
   "main": "dist/LayoutGrid.min.js",
   "scripts": {
@@ -22,11 +22,12 @@
   ],
   "dependencies": {
     "buefy": "^0.7.4",
+    "element-resize-detector": "^1.1.10",
+    "interactjs": "^1.3.3",
     "lodash": "^4.17.5",
     "vue": "^2.5.13",
-    "vuex": "^3.0.1",
-    "element-resize-detector": "^1.1.10",
-    "interactjs": "^1.3.3"
+    "vue-loading-overlay": "git+ssh://[email protected]:10022/VueLibs/vue-loading-overlay.git#v1.0.1",
+    "vuex": "^3.0.1"
   },
   "devDependencies": {
     "autoprefixer": "^8.2.0",

diff --git a/src/components/GridItem.vue b/src/components/GridItem.vue
@@ -1,6 +1,6 @@
 <template>
     <div ref="item"
-         class="vue-grid-item"
+         class="vue-grid-item vld-parent"
          :class="{ 'vue-resizable' : resizable, 'resizing' : isResizing, 'vue-draggable-dragging' : isDragging, 'cssTransforms' : useCssTransforms, 'render-rtl' : renderRtl, 'disable-userselect': isDragging }"
          :style="style">
         <slot></slot>
@@ -74,7 +74,7 @@
         cursor: sw-resize;
         right: auto;
     }
-    
+
     .vue-grid-item.disable-userselect {
         user-select: none;
     }
@@ -83,6 +83,11 @@
     import {setTopLeft, setTopRight, setTransformRtl, setTransform, createMarkup, getLayoutItem} from '../utils/utils';
     import {getControlPosition, offsetXYFromParentOf, createCoreData} from '../utils/draggableUtils';
     import {getDocumentDir} from '../utils/DOM';
+    import Vue from 'vue';
+    import Loading from 'vue-loading-overlay';
+    import 'vue-loading-overlay/dist/vue-loading.css';
+
+    Vue.use(Loading);
 
     let interact = require("interactjs");
 
@@ -153,6 +158,11 @@
                 required: false,
                 default: 'a, button'
             },
+            isLoading: {
+                type: Boolean,
+                required: false,
+                default: false
+            }
         },
         inject: ["eventBus"],
         data: function () {
@@ -274,6 +284,23 @@
             this.createStyle();
         },
         watch: {
+            isLoading: function(n, o) {
+                if (n) {
+                    this.$vldLoader = this.$overlay.show({
+                        container: this.$refs.item,
+                        width: 84,
+                        height: 84,
+                        loader: 'bars',
+                        canCancel: false,
+                        color: '#CDE201',
+                        backgroundColor: '#000000',
+                        opacity: 0.5,
+                        zIndex: 1002,
+                    });
+                } else {
+                    this.$vldLoader.hide();
+                }
+            },
             isDraggable: function () {
                 this.draggable = this.isDraggable;
             },

diff --git a/src/components/LayoutGrid/LayoutGrid.vue b/src/components/LayoutGrid/LayoutGrid.vue
@@ -18,6 +18,7 @@
                     :h="l.h"
                     :i="l.i"
                     :min-w="minW"
+                    :is-loading="l.isLoading"
                     @resize="(i, h, w) => onResize(i, h, w)"
                     @move="(i, x, y) => onMove(i, x, y)"
                     @moved="(i, x, y) => onMoved(i, x, y)"