Vue grid layout sample

by uglyhobbitfeet

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.28/vue.min.js"></script>
<script src="https://unpkg.com/vue-grid-layout@1.0.0/dist/vue-grid-layout.js"></script>
<script src="https://unpkg.com/vue-touch@1.1.0/vue-touch.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.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;
window.vm = new Vue({
  el: '#app',
  components: {
    GridLayout,
    GridItem,
  },
  data: function() {
    return {
      layout: [
        {"x": 0, "y": 0, "w": 2, "h": 2, "i": "0" }, 
        {"x": 2, "y": 0, "w": 2, "h": 3, "i": "1" }, 
        {"x": 4, "y": 0, "w": 2, "h": 4, "i": "2" }, 
        {"x": 6, "y": 0, "w": 2, "h": 5, "i": "3" },
      ],
    };
  },
  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">',
    '            <v-layout secondary>',
    '              <v-flex xs12>',
    '                <div style="height:25px;background-color:green">TOP</div>',
    '              </v-flex>',
    '              <v-flex xs12 style="height:calc(100%-50px);overflow:auto;">',
    '                <div style="height:125px;background-color:blue">MIDDLE</div>',
    '              </v-flex>',    
    '              <v-flex xs12>',
    '                <div style="height:25px;background-color:red">BOTTOM</div>',
    '              </v-flex>',
    '            </v-layout>',
    '        </grid-item>',
    '    </grid-layout>',
    '  </div>',
    '</div>'
  ].join(' '),

  computed: {},
  ready: function() {
    var vm = this;
  },
});