vue-grid-layout
Version:
A draggable and resizable grid layout, as a Vue component.
1 lines • 3.55 kB
JavaScript
(window.webpackJsonp=window.webpackJsonp||[]).push([[6],{408:function(e,t,a){},458:function(e,t,a){"use strict";var i=a(1),r=a(18),n=a(98),l=a(68),s=a(27),o=a(215),c=a(129),u=a(50),d=a(459),h=a(70)("splice"),y=Math.max,g=Math.min;i({target:"Array",proto:!0,forced:!h},{splice:function(e,t){var a,i,h,m,v,f,b=r(this),p=s(b),_=n(e,p),x=arguments.length;for(0===x?a=i=0:1===x?(a=0,i=p-_):(a=x-2,i=g(y(l(t),0),p-_)),o(p+a-i),h=c(b,i),m=0;m<i;m++)(v=_+m)in b&&u(h,m,b[v]);if(h.length=i,a<i){for(m=_;m<p-i;m++)f=m+a,(v=m+i)in b?b[f]=b[v]:d(b,f);for(m=p;m>p-i+a;m--)d(b,m-1)}else if(a>i)for(m=p-i;m>_;m--)f=m+a-1,(v=m+i-1)in b?b[f]=b[v]:d(b,f);for(m=0;m<a;m++)b[m+_]=arguments[m+2];return b.length=p-i+a,h}})},459:function(e,t,a){"use strict";var i=a(46),r=TypeError;e.exports=function(e,t){if(!delete e[t])throw r("Cannot delete property "+i(t)+" of "+i(e))}},460:function(e,t,a){"use strict";a(408)},484:function(e,t,a){"use strict";a.r(t);a(193),a(44),a(93),a(458);var i=a(371),r={components:{GridLayout:i.GridLayout,GridItem:i.GridItem},data:function(){return{layout:[{x:0,y:0,w:2,h:2,i:"0"},{x:2,y:0,w:2,h:2,i:"1"},{x:4,y:0,w:2,h:2,i:"2"},{x:6,y:0,w:2,h:2,i:"3"},{x:8,y:0,w:2,h:2,i:"4"}],draggable:!0,resizable:!0,colNum:12,index:0}},mounted:function(){this.index=this.layout.length},methods:{addItem:function(){this.layout.push({x:2*this.layout.length%(this.colNum||12),y:this.layout.length+(this.colNum||12),w:2,h:2,i:this.index}),this.index++},removeItem:function(e){var t=this.layout.map((function(e){return e.i})).indexOf(e);this.layout.splice(t,1)}}},n=(a(460),a(34)),l=Object(n.a)(r,(function(){var e=this,t=e._self._c;return t("div",[t("div",{staticClass:"layoutJSON"},[e._v("\n Displayed as "),t("code",[e._v("[x, y, w, h]")]),e._v(":\n "),t("div",{staticClass:"columns"},e._l(e.layout,(function(a){return t("div",{key:a.i,staticClass:"layoutItem"},[t("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(" "),t("button",{on:{click:e.addItem}},[e._v("Add an item dynamically")]),e._v(" "),t("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(t){var a=e.draggable,i=t.target,r=!!i.checked;if(Array.isArray(a)){var n=e._i(a,null);i.checked?n<0&&(e.draggable=a.concat([null])):n>-1&&(e.draggable=a.slice(0,n).concat(a.slice(n+1)))}else e.draggable=r}}}),e._v(" Draggable\n "),t("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(t){var a=e.resizable,i=t.target,r=!!i.checked;if(Array.isArray(a)){var n=e._i(a,null);i.checked?n<0&&(e.resizable=a.concat([null])):n>-1&&(e.resizable=a.slice(0,n).concat(a.slice(n+1)))}else e.resizable=r}}}),e._v(" Resizable\n "),t("grid-layout",{attrs:{layout:e.layout,"col-num":e.colNum,"row-height":30,"is-draggable":e.draggable,"is-resizable":e.resizable,"vertical-compact":!0,"use-css-transforms":!0},on:{"update:layout":function(t){e.layout=t}}},e._l(e.layout,(function(a){return t("grid-item",{key:a.i,attrs:{static:a.static,x:a.x,y:a.y,w:a.w,h:a.h,i:a.i}},[t("span",{staticClass:"text"},[e._v(e._s(a.i))]),e._v(" "),t("span",{staticClass:"remove",on:{click:function(t){return e.removeItem(a.i)}}},[e._v("x")])])})),1)],1)}),[],!1,null,null,null);t.default=l.exports}}]);