Vue grid layout sample

by bbilguun

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-grid-layout.js"></script>
<script src="https://cdn.flexmonster.com/flexmonster.js"></script>

<div id="app">

</div>

CSS

.vue-grid-layout {
    background: #eee;
}

.layoutJSON {
    background: #ddd;
    border: 1px solid black;
    margin-top: 10px;
    padding: 10px;
}

.eventsJSON {
    background: #ddd;
    border: 1px solid black;
    margin-top: 10px;
    padding: 10px;
    height: 100px;
    overflow-y: scroll;
}

.columns {
    -moz-columns: 120px;
    -webkit-columns: 120px;
    columns: 120px;
}



.vue-resizable-handle {
    z-index: 5000;
    position: absolute;
    width: 20px;
    height: 20px;
    bottom: 0;
    right: 0;
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pg08IS0tIEdlbmVyYXRvcjogQWRvYmUgRmlyZXdvcmtzIENTNiwgRXhwb3J0IFNWRyBFeHRlbnNpb24gYnkgQWFyb24gQmVhbGwgKGh0dHA6Ly9maXJld29ya3MuYWJlYWxsLmNvbSkgLiBWZXJzaW9uOiAwLjYuMSAgLS0+DTwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DTxzdmcgaWQ9IlVudGl0bGVkLVBhZ2UlMjAxIiB2aWV3Qm94PSIwIDAgNiA2IiBzdHlsZT0iYmFja2dyb3VuZC1jb2xvcjojZmZmZmZmMDAiIHZlcnNpb249IjEuMSINCXhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiDQl4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjZweCIgaGVpZ2h0PSI2cHgiDT4NCTxnIG9wYWNpdHk9IjAuMzAyIj4NCQk8cGF0aCBkPSJNIDYgNiBMIDAgNiBMIDAgNC4yIEwgNCA0LjIgTCA0LjIgNC4yIEwgNC4yIDAgTCA2IDAgTCA2IDYgTCA2IDYgWiIgZmlsbD0iIzAwMDAwMCIvPg0JPC9nPg08L3N2Zz4=');
    background-position: bottom right;
    padding: 0 3px 3px 0;
    background-repeat: no-repeat;
    background-origin: content-box;
    box-sizing: border-box;
    cursor: se-resize;
}

.vue-grid-item:not(.vue-grid-placeholder) {
    background: #ccc;
    border: 1px solid black;
}

.vue-grid-item.resizing {
    opacity: 0.9;
}

.vue-grid-item.static {
    background: #cce;
}

.vue-grid-item .text {
    font-size: 24px;
    text-align: center;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    height:...

JavaScript

var GridLayout = VueGridLayout.GridLayout;
var GridItem = VueGridLayout.GridItem;
var indexVM = new Vue({
  el: '#app',
  components: {
    GridLayout,
    GridItem,
  },
  data: function() {
    return {
    	changedLayouts:[],
      changedPivots:[],
      pivotCollection:[],
      layout: [{
        "x": 0,
        "y": 0,
        "w": 5,
        "h": 5,
        "i": "0",guid:"7c191942-8961-43aa-8052-de8301b24ad7",
        formats:[],
        conditions:[]
      }, {
        "x": 2,
        "y": 0,
         "w": 5,
        "h": 5,
        "i": "1",guid:"b25ec44e-767a-4a8e-9d85-8b1d8862f46e",
        formats:[],
        conditions:[]
      }, {
        "x": 4,
        "y": 0,
         "w": 5,
        "h": 5,
        "i": "2",guid:"6ef9f919-7032-4de7-84e9-1162a9e24f2b",
        formats:[],
        conditions:[]
      }, {
        "x": 6,
        "y": 0,
        "w": 5,
        "h": 5,
        "i": "3",guid:"05ba3963-71ef-4428-af5f-2a31b330cb38",
        formats:[],
        conditions:[]
      }],
    };
  }, 
template: [
    '<div>',
    '<div id="content" v-if="layout">',
    '<grid-layout',
    ':layout.sync="layout"',
    ':col-num="12"',
    ':row-height="30"',
    ':is-draggable="true"',
    ':is-resizable="true"',
    ':vertical-compact="true"',
    ':margin="[10, 10]"',
    ':use-css-transforms="true">',
    '<grid-item v-for="item in layout"',
    ':x.sync="item.x"',
    ':y.sync="item.y"',
    ':w.sync="item.w"',
    ':h.sync="item.h"',    
    ':i="item.i">',
    '<div v-bind:id="item.guid"></div>',
    '</grid-item>',
    '</grid-layout>',
    '</div>',
    '</div>'
  ].join(' '),
  computed: {},
  ready: function() {
    
  },
  methods: {  	
    load:function(){
      var _this = this;
      	_this.layout.foreach((item) => {
        	var pivot = new Flexmonster({
              container: "#"+item.guid,
              componentFolder: "https://cdn.flexmonster.com/",
              toolbar: true,
              width:"100%",
              height:"100%",
...