vue-grid-layout
Version:
A draggable and resizable grid layout, as a Vue component.
1 lines • 3.25 kB
JavaScript
(window.webpackJsonp=window.webpackJsonp||[]).push([[13],{409:function(e,i,a){},461:function(e,i,a){"use strict";a(409)},485:function(e,i,a){"use strict";a.r(i);a(193),a(44);var r=a(371),s={components:{GridLayout:r.GridLayout,GridItem:r.GridItem},data:function(){return{layout:[{x:0,y:0,w:2,h:2,i:"0"},{x:2,y:0,w:2,h:4,i:"1"},{x:4,y:0,w:2,h:5,i:"2"},{x:6,y:0,w:2,h:3,i:"3"},{x:8,y:0,w:2,h:3,i:"4"},{x:10,y:0,w:2,h:3,i:"5"},{x:0,y:5,w:2,h:5,i:"6"},{x:2,y:5,w:2,h:5,i:"7"},{x:4,y:5,w:2,h:5,i:"8"},{x:6,y:4,w:2,h:4,i:"9"},{x:8,y:4,w:2,h:4,i:"10"},{x:10,y:4,w:2,h:4,i:"11"},{x:0,y:10,w:2,h:5,i:"12"},{x:2,y:10,w:2,h:5,i:"13"},{x:4,y:8,w:2,h:4,i:"14"},{x:6,y:8,w:2,h:4,i:"15"},{x:8,y:10,w:2,h:5,i:"16"},{x:10,y:4,w:2,h:2,i:"17"},{x:0,y:9,w:2,h:3,i:"18"},{x:2,y:6,w:2,h:2,i:"19"}],draggable:!0,resizable:!0,responsive:!0,index:0}},methods:{}},t=(a(461),a(34)),n=Object(t.a)(s,(function(){var e=this,i=e._self._c;return i("div",{staticStyle:{width:"100%",height:"2000px"}},[i("div",{staticClass:"layoutJSON"},[e._v("\n Displayed as "),i("code",[e._v("[x, y, w, h]")]),e._v(":\n "),i("div",{staticClass:"columns"},e._l(e.layout,(function(a){return i("div",[i("b",[e._v(e._s(a.i))]),e._v(": ["+e._s(a.x)+", "+e._s(a.y)+", "+e._s(a.w)+", "+e._s(a.h)+"]\n ")])})),0)]),e._v(" "),i("hr"),e._v(" "),i("input",{directives:[{name:"model",rawName:"v-model",value:e.draggable,expression:"draggable"}],attrs:{type:"checkbox"},domProps:{checked:Array.isArray(e.draggable)?e._i(e.draggable,null)>-1:e.draggable},on:{change:function(i){var a=e.draggable,r=i.target,s=!!r.checked;if(Array.isArray(a)){var t=e._i(a,null);r.checked?t<0&&(e.draggable=a.concat([null])):t>-1&&(e.draggable=a.slice(0,t).concat(a.slice(t+1)))}else e.draggable=s}}}),e._v(" Draggable\n "),i("input",{directives:[{name:"model",rawName:"v-model",value:e.resizable,expression:"resizable"}],attrs:{type:"checkbox"},domProps:{checked:Array.isArray(e.resizable)?e._i(e.resizable,null)>-1:e.resizable},on:{change:function(i){var a=e.resizable,r=i.target,s=!!r.checked;if(Array.isArray(a)){var t=e._i(a,null);r.checked?t<0&&(e.resizable=a.concat([null])):t>-1&&(e.resizable=a.slice(0,t).concat(a.slice(t+1)))}else e.resizable=s}}}),e._v(" Resizable\n "),i("input",{directives:[{name:"model",rawName:"v-model",value:e.responsive,expression:"responsive"}],attrs:{type:"checkbox"},domProps:{checked:Array.isArray(e.responsive)?e._i(e.responsive,null)>-1:e.responsive},on:{change:function(i){var a=e.responsive,r=i.target,s=!!r.checked;if(Array.isArray(a)){var t=e._i(a,null);r.checked?t<0&&(e.responsive=a.concat([null])):t>-1&&(e.responsive=a.slice(0,t).concat(a.slice(t+1)))}else e.responsive=s}}}),e._v(" Responsive\n "),i("br"),e._v(" "),i("div",{staticStyle:{width:"100%","margin-top":"10px",height:"100%"}},[i("grid-layout",{attrs:{layout:e.layout,"col-num":12,"row-height":30,"is-draggable":e.draggable,"is-resizable":e.resizable,responsive:e.responsive,"vertical-compact":!0,"use-css-transforms":!0},on:{"update:layout":function(i){e.layout=i}}},e._l(e.layout,(function(a){return i("grid-item",{attrs:{static:a.static,x:a.x,y:a.y,w:a.w,h:a.h,i:a.i}},[i("span",{staticClass:"text"},[e._v(e._s(a.i))])])})),1)],1)])}),[],!1,null,"796bfeb2",null);i.default=n.exports}}]);