vue-grid-layout
Version:
A draggable and resizable grid layout, as a Vue component.
1 lines • 3.2 kB
JavaScript
(window.webpackJsonp=window.webpackJsonp||[]).push([[16],{414:function(e,a,i){},467:function(e,a,i){"use strict";i(414)},490:function(e,a,i){"use strict";i.r(a);i(193),i(44);var r=i(371),t={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,bounded:!0}}},n=(i(467),i(34)),l=Object(n.a)(t,(function(){var e=this,a=e._self._c;return a("div",{staticStyle:{width:"100%",height:"2000px"}},[a("div",{staticClass:"layoutJSON"},[e._v("\n Displayed as "),a("code",[e._v("[x, y, w, h]")]),e._v(":\n "),a("div",{staticClass:"columns"},e._l(e.layout,(function(i){return a("div",[a("b",[e._v(e._s(i.i))]),e._v(": ["+e._s(i.x)+", "+e._s(i.y)+", "+e._s(i.w)+", "+e._s(i.h)+"]\n ")])})),0)]),e._v(" "),a("hr"),e._v(" "),a("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(a){var i=e.draggable,r=a.target,t=!!r.checked;if(Array.isArray(i)){var n=e._i(i,null);r.checked?n<0&&(e.draggable=i.concat([null])):n>-1&&(e.draggable=i.slice(0,n).concat(i.slice(n+1)))}else e.draggable=t}}}),e._v(" Draggable\n "),a("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(a){var i=e.resizable,r=a.target,t=!!r.checked;if(Array.isArray(i)){var n=e._i(i,null);r.checked?n<0&&(e.resizable=i.concat([null])):n>-1&&(e.resizable=i.slice(0,n).concat(i.slice(n+1)))}else e.resizable=t}}}),e._v(" Resizable\n "),a("input",{directives:[{name:"model",rawName:"v-model",value:e.bounded,expression:"bounded"}],attrs:{type:"checkbox"},domProps:{checked:Array.isArray(e.bounded)?e._i(e.bounded,null)>-1:e.bounded},on:{change:function(a){var i=e.bounded,r=a.target,t=!!r.checked;if(Array.isArray(i)){var n=e._i(i,null);r.checked?n<0&&(e.bounded=i.concat([null])):n>-1&&(e.bounded=i.slice(0,n).concat(i.slice(n+1)))}else e.bounded=t}}}),e._v(" Bounded\n "),a("br"),e._v(" "),a("div",{staticStyle:{width:"100%","margin-top":"10px",height:"100%"}},[a("grid-layout",{attrs:{layout:e.layout,"col-num":12,"row-height":30,"is-draggable":e.draggable,"is-resizable":e.resizable,"is-bounded":e.bounded,"vertical-compact":!0,"use-css-transforms":!0},on:{"update:layout":function(a){e.layout=a}}},e._l(e.layout,(function(i){return a("grid-item",{attrs:{static:i.static,x:i.x,y:i.y,w:i.w,h:i.h,i:i.i}},[a("span",{staticClass:"text"},[e._v(e._s(i.i))])])})),1)],1)])}),[],!1,null,"65b80052",null);a.default=l.exports}}]);