grid-layout-plus/lib/components/grid-layout.vue.js

<p align="center"> <a href="https://grid-layout-plus.netlify.app/" target="_blank" rel="noopener noreferrer"> <img src="./docs/public/grid-layout-plus.svg" width="180" style="width: 120px;" /> </a> </p>

"use strict";const a=require("vue"),_=require("./grid-item.vue.js"),$=require("@vexip-ui/hooks"),m=require("@vexip-ui/utils"),u=require("../helpers/common.js"),b=require("../helpers/responsive.js"),G=a.defineComponent({__name:"grid-layout",props:{autoSize:{type:Boolean,default:!0},colNum:{default:12},rowHeight:{default:150},maxRows:{default:1/0},margin:{default:()=>[10,10]},isDraggable:{type:Boolean,default:!0},isResizable:{type:Boolean,default:!0},isMirrored:{type:Boolean,default:!1},isBounded:{type:Boolean,default:!1},useCssTransforms:{type:Boolean,default:!0},verticalCompact:{type:Boolean,default:!0},restoreOnDrag:{type:Boolean,default:!1},layout:{},responsive:{type:Boolean,default:!1},responsiveLayouts:{default:()=>({})},transformScale:{default:1},breakpoints:{default:()=>({lg:1200,md:996,sm:768,xs:480,xxs:0})},cols:{default:()=>({lg:12,md:10,sm:6,xs:4,xxs:2})},preventCollision:{type:Boolean,default:!1},useStyleCursor:{type:Boolean,default:!0}},emits:["layout-before-mount","layout-mounted","layout-updated","breakpoint-changed","update:layout","layout-ready"],setup(D,{expose:T,emit:H}){const o=D,c=H,t=a.reactive({width:-1,mergedStyle:{},lastLayoutLength:0,isDragging:!1,placeholder:{x:0,y:0,w:0,h:0,i:""},layouts:{},lastBreakpoint:null,originalLayout:null}),B=new Map,i=a.ref(o.layout),y=a.ref(),{observeResize:I,unobserveResize:q}=$.useResize(),s=m.createEventEmitter();s.on("resizeEvent",M),s.on("dragEvent",N),a.onBeforeMount(()=>{c("layout-before-mount",i.value)}),a.onMounted(()=>{c("layout-mounted",i.value),a.nextTick(()=>{u.validateLayout(i.value),t.originalLayout=i.value,a.nextTick(()=>{S(),y.value&&I(y.value,m.debounce(L,16)),u.compact(i.value,o.verticalCompact),c("layout-updated",i.value),h(),L()})})}),a.onBeforeUnmount(()=>{s.clearAll(),y.value&&q(y.value)});function M(e,r,n,f,d,p){E(e,r,n,f,d,p)}function N(e,r,n,f,d,p){z(e,r,n,f,d,p)}a.watch(()=>t.width,(e,r)=>{a.nextTick(()=>{s.emit("updateWidth",e),r===-1&&a.nextTick(()=>{c("layout-ready",i.value)}),h()})}),a.watch(()=>[o.layout,o.layout.length],()=>{i.value=o.layout,R()}),a.watch(()=>o.colNum,e=>{s.emit("setColNum",e)}),a.watch(()=>o.rowHeight,e=>{s.emit("setRowHeight",e)}),a.watch(()=>o.isDraggable,e=>{s.emit("setDraggable",e)}),a.watch(()=>o.isResizable,e=>{s.emit("setResizable",e)}),a.watch(()=>o.isBounded,e=>{s.emit("setBounded",e)}),a.watch(()=>o.transformScale,e=>{s.emit("setTransformScale",e)}),a.watch(()=>o.responsive,e=>{e||(c("update:layout",t.originalLayout),s.emit("setColNum",o.colNum)),L()}),a.watch(()=>o.maxRows,e=>{s.emit("setMaxRows",e)}),a.watch([()=>o.margin,()=>o.margin[1]],h),a.provide(u.LAYOUT_KEY,a.reactive({...a.toRefs(o),...a.toRefs(t),increaseItem:F,decreaseItem:W})),a.provide(u.EMITTER_KEY,s),T({state:t,getItem:O,resizeEvent:E,dragEvent:z,layoutUpdate:R});function F(e){B.set(e.i,e)}function W(e){B.delete(e.i)}function O(e){return B.get(e)}function R(){if(!m.isNull(i.value)&&!m.isNull(t.originalLayout)){if(i.value.length!==t.originalLayout.length){const e=U(i.value,t.originalLayout);if(e.length>0)if(i.value.length>t.originalLayout.length)t.originalLayout=t.originalLayout.concat(e);else{const r=new Set(e.map(n=>n.i));t.originalLayout=t.originalLayout.filter(n=>!r.has(n.i))}t.lastLayoutLength=i.value.length,S()}u.compact(i.value,o.verticalCompact),s.emit("updateWidth",t.width),h(),c("layout-updated",i.value)}}function h(){t.mergedStyle={height:Y()}}function L(){y.value&&(t.width=y.value.offsetWidth),s.emit("resizeEvent")}function Y(){if(!o.autoSize)return;const e=parseFloat(o.margin[1]);return u.bottom(i.value)*(o.rowHeight+e)+e+"px"}let C;function z(e,r,n,f,d,p){let l=u.getLayoutItem(i.value,r);m.isNull(l)&&(l={h:0,w:0,x:0,y:0,i:""}),e==="dragstart"&&!o.verticalCompact&&(C=i.value.reduce((w,{i:k,x:g,y:v})=>({...w,[k]:{x:g,y:v}}),{})),e==="dragmove"||e==="dragstart"?(t.placeholder.i=r,t.placeholder.x=l.x,t.placeholder.y=l.y,t.placeholder.w=p,t.placeholder.h=d,a.nextTick(()=>{t.isDragging=!0}),s.emit("updateWidth",t.width)):a.nextTick(()=>{t.isDragging=!1}),i.value=u.moveElement(i.value,l,n,f,!0,o.preventCollision),o.restoreOnDrag?(l.static=!0,u.compact(i.value,o.verticalCompact,C),l.static=!1):u.compact(i.value,o.verticalCompact),s.emit("compact"),h(),e==="dragend"&&(C=void 0,c("layout-updated",i.value))}function E(e,r,n,f,d,p){let l=u.getLayoutItem(i.value,r);m.isNull(l)&&(l={h:0,w:0,x:0,y:0,i:""});let w;if(o.preventCollision){const k=u.getAllCollisions(i.value,{...l,w:p,h:d}).filter(g=>g.i!==l.i);if(w=k.length>0,w){let g=1/0,v=1/0;k.forEach(x=>{x.x>l.x&&(g=Math.min(g,x.x)),x.y>l.y&&(v=Math.min(v,x.y))}),Number.isFinite(g)&&(l.w=g-l.x),Number.isFinite(v)&&(l.h=v-l.y)}}w||(l.w=p,l.h=d),e==="resizestart"||e==="resizemove"?(t.placeholder.i=r,t.placeholder.x=n,t.placeholder.y=f,t.placeholder.w=l.w,t.placeholder.h=l.h,a.nextTick(()=>{t.isDragging=!0}),s.emit("updateWidth",t.width)):e&&a.nextTick(()=>{t.isDragging=!1}),o.responsive&&A(),u.compact(i.value,o.verticalCompact),s.emit("compact"),h(),e==="resizeend"&&c("layout-updated",i.value)}function A(){const e=b.getBreakpointFromWidth(o.breakpoints,t.width);if(e===t.lastBreakpoint)return;const r=b.getColsFromBreakpoint(e,o.cols);!m.isNull(t.lastBreakpoint)&&!t.layouts[t.lastBreakpoint]&&(t.layouts[t.lastBreakpoint]=u.cloneLayout(i.value));const n=b.findOrGenerateResponsiveLayout(t.originalLayout,t.layouts,o.breakpoints,e,t.lastBreakpoint,r,o.verticalCompact);t.layouts[e]=n,t.lastBreakpoint!==e&&c("breakpoint-changed",e,n),i.value=n,c("update:layout",n),t.lastBreakpoint=e,s.emit("setColNum",r)}function S(){t.layouts=Object.assign({},o.responsiveLayouts)}function U(e,r){const n=new Set(r.map(l=>l.i)),f=new Set(e.map(l=>l.i)),d=e.filter(l=>!n.has(l.i)),p=r.filter(l=>!f.has(l.i));return d.concat(p)}return(e,r)=>(a.openBlock(),a.createElementBlock("div",{ref_key:"wrapper",ref:y,class:"vgl-layout",style:a.normalizeStyle(t.mergedStyle)},[e.$slots.default?a.renderSlot(e.$slots,"default",{key:0}):(a.openBlock(!0),a.createElementBlock(a.Fragment,{key:1},a.renderList(i.value,n=>(a.openBlock(),a.createBlock(_,a.mergeProps({key:n.i,ref_for:!0},n),{default:a.withCtx(()=>[a.renderSlot(e.$slots,"item",{item:n})]),_:2},1040))),128)),a.withDirectives(a.createVNode(_,{class:"vgl-item--placeholder",x:t.placeholder.x,y:t.placeholder.y,w:t.placeholder.w,h:t.placeholder.h,i:t.placeholder.i},null,8,["x","y","w","h","i"]),[[a.vShow,t.isDragging]])],4))}});module.exports=G;
//# sourceMappingURL=grid-layout.vue.js.map