standard grid working with slots

Author: gmsa

index.html

@@ -21,9 +21,6 @@ <h1>Vue Grid Layout</h1>
             </div>
         </div>
         <div id="content">
-            <!--<responsive-grid-layout :layout.sync="layout" :layouts="layouts" :row-height="30" :is-draggable="true" :vertical-compact="true">
-                <text-item v-for="item in layout" :text="item.i"></text-item>
-            </responsive-grid-layout>-->
             <!--<responsive-grid-layout :layout.sync="layout" :layouts="layouts" :row-height="30" :is-draggable="true" :vertical-compact="true">
                 <grid-item v-for="item in layout"
                            :x.sync="item.x"

src/GridItem.vue

@@ -2,7 +2,7 @@
     <div v-el:item
              class="vue-grid-item"
              :class="{ 'vue-resizable' : isResizable, 'vue-draggable-dragging' : isDragging, 'cssTransforms' : useCssTransforms }"
-             style="{{{createStyle}}}"
+             :style="style"
         >
         <slot></slot>
         <!--span class="text">{{id}}</span-->
@@ -205,7 +205,7 @@
             this.isDraggable = this.$parent.isDraggable;
             this.isResizable = this.$parent.isResizable;
             this.useCssTransforms = this.$parent.useCssTransforms;
-//            this.createStyle();
+            this.createStyle();
 //            var self = this;
             if (this.isDraggable) {
                 var element = this.$els.item;
@@ -223,13 +223,28 @@
             }
             //this.pos = this.calcPosition();
         },
-        /*watch: {
+        watch: {
             cols: function() {
                 this.createStyle();
+            },
+            containerWidth: function() {
+                this.createStyle();
+            },
+            x: function() {
+                this.createStyle();
+            },
+            y: function() {
+                this.createStyle();
+            },
+            h: function() {
+                this.createStyle();
+            },
+            w: function() {
+                this.createStyle();
             }
-        },*/
+        },
         computed: {
-            createStyle: function() {
+            /*createStyle: function() {
                 var pos = this.calcPosition(this.x, this.y, this.w, this.h);
                 //const {usePercentages, containerWidth, useCssTransforms} = this.props;
 
@@ -244,7 +259,7 @@
                 }
 
                 return createMarkup(style);
-            },
+            },*/
         },
         methods: {
             createStyle: function() {
@@ -308,12 +323,16 @@
 */
                 // Get new WH
                 var pos = this.calcWH(newSize.height, newSize.width);
-                this.w = pos.w;
                 if (pos.h >= 1) {
                     this.h = pos.h;
                 } else {
                     this.h = 1;
                 }
+                if (pos.w >= 1) {
+                    this.w = pos.w;
+                } else {
+                    this.w = 1;
+                }
 
                 var shouldUpdate = false;
                 if (this.lastW !== x && this.lastH !== y) {
@@ -370,7 +389,7 @@
                         clientRect = event.target.getBoundingClientRect();
                         newPosition.left = clientRect.left - parentRect.left;
                         newPosition.top = clientRect.top - parentRect.top;
-                        console.log("### drag end => " + JSON.stringify(newPosition));
+//                        console.log("### drag end => " + JSON.stringify(newPosition));
 //                        console.log("### DROP: " + JSON.stringify(newPosition));
                         this.dragging = null;
                         this.isDragging = false;

src/GridLayout.vue

@@ -1,23 +1,6 @@
 <template>
     <div class="vue-grid-layout container" :style="mergedStyle">
         <slot></slot>
-        <!--grid-item v-for="item in layout"
-                   :cols="cols"
-                   :container-width="width"
-                   :margin="margin"
-                   :max-rows="maxRows"
-                   :row-height="rowHeight"
-                   :is-draggable="isDraggable"
-                   :is-resizable="isResizable"
-                   :use-css-transforms="useCssTransforms"
-                   :x.sync="item.x"
-                   :y.sync="item.y"
-                   :w.sync="item.w"
-                   :h.sync="item.h"
-                   :id="item.i"
-                   :component="item.component"
-        >
-        </grid-item-->
     </div>
 </template>
 <style>
@@ -90,8 +73,11 @@
         },
         ready() {
             if (this.width === null) {
-                this.width = this.$parent.$el.offsetWidth - (this.margin[0] * 2);
-                window.addEventListener('resize', this.onWindowResize);
+                this.$nextTick(function() {
+//                    this.width = this.$parent.$el.offsetWidth - (this.margin[0] * 2);
+                    this.width = this.$parent.$el.offsetWidth;
+                    window.addEventListener('resize', this.onWindowResize);
+                });
             }
             this.layout = compact(this.layout, this.verticalCompact);
 
@@ -112,8 +98,8 @@
                 };
             },
             onWindowResize: function() {
-                if (this.$parent.$el.offsetWidth !== undefined) {
-                    this.width = this.$parent.$el.offsetWidth - (this.margin[0] * 2);
+                if (this.$parent !== null && this.$parent.$el.offsetWidth !== undefined) {
+                    this.width = this.$parent.$el.offsetWidth;
                 }
             },
             containerHeight: function() {