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