grid-layout-plus-no-pnpm/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"),Y=require("@vexip-ui/hooks"),h=require("@vexip-ui/utils"),u=require("../helpers/common.js"),x=require("../helpers/responsive.js"),U=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(D,{expose:T,emit:c}){const o=D,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),g=a.ref(),{observeResize:_,unobserveResize:N}=Y.useResize(),r=h.createEventEmitter();r.on("resizeEvent",H),r.on("dragEvent",q),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(()=>{E(),g.value&&_(g.value,h.debounce(L,16)),u.compact(i.value,o.verticalCompact),c("layout-updated",i.value),m(),L()})})}),a.onBeforeUnmount(()=>{r.clearAll(),g.value&&N(g.value)});function H(e,s,n,f,d,p){z(e,s,n,f,d,p)}function q(e,s,n,f,d,p){R(e,s,n,f,d,p)}a.watch(()=>t.width,(e,s)=>{a.nextTick(()=>{r.emit("updateWidth",e),s===null&&a.nextTick(()=>{c("layout-ready",i.value)}),m()})}),a.watch(()=>[o.layout,o.layout.length],()=>{i.value=o.layout,F()}),a.watch(()=>o.colNum,e=>{r.emit("setColNum",e)}),a.watch(()=>o.rowHeight,e=>{r.emit("setRowHeight",e)}),a.watch(()=>o.isDraggable,e=>{r.emit("setDraggable",e)}),a.watch(()=>o.isResizable,e=>{r.emit("setResizable",e)}),a.watch(()=>o.isBounded,e=>{r.emit("setBounded",e)}),a.watch(()=>o.transformScale,e=>{r.emit("setTransformScale",e)}),a.watch(()=>o.responsive,e=>{e||(c("update:layout",t.originalLayout),r.emit("setColNum",o.colNum)),L()}),a.watch(()=>o.maxRows,e=>{r.emit("setMaxRows",e)}),a.watch(()=>o.margin,m),a.provide(u.LAYOUT_KEY,a.reactive({...a.toRefs(o),...a.toRefs(t),increaseItem:I,decreaseItem:O})),a.provide(u.EMITTER_KEY,r),T({state:t,getItem:M,resizeEvent:z,dragEvent:R});function I(e){b.set(e.i,e)}function O(e){b.delete(e.i)}function M(e){return b.get(e)}function F(){if(!h.isNull(i.value)&&!h.isNull(t.originalLayout)){if(i.value.length!==t.originalLayout.length){const e=j(i.value,t.originalLayout);if(e.length>0)if(i.value.length>t.originalLayout.length)t.originalLayout=t.originalLayout.concat(e);else{const s=new Set(e.map(n=>n.i));t.originalLayout=t.originalLayout.filter(n=>!s.has(n.i))}t.lastLayoutLength=i.value.length,E()}u.compact(i.value,o.verticalCompact),r.emit("updateWidth",t.width),m(),c("layout-updated",i.value)}}function m(){t.mergedStyle={height:W()}}function L(){g.value&&(t.width=g.value.offsetWidth),r.emit("resizeEvent")}function W(){return o.autoSize?u.bottom(i.value)*(o.rowHeight+o.margin[1])+o.margin[1]+"px":void 0}let C;function R(e,s,n,f,d,p){let l=u.getLayoutItem(i.value,s);h.isNull(l)&&(l={h:0,w:0,x:0,y:0,i:""}),e==="dragstart"&&!o.verticalCompact&&(C=i.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=l.x,t.placeholder.y=l.y,t.placeholder.w=p,t.placeholder.h=d,a.nextTick(()=>{t.isDragging=!0}),r.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),r.emit("compact"),m(),e==="dragend"&&(C=void 0,c("layout-updated",i.value))}function z(e,s,n,f,d,p){let l=u.getLayoutItem(i.value,s);h.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(y=>y.i!==l.i);if(w=k.length>0,w){let y=1/0,v=1/0;k.forEach(B=>{B.x>l.x&&(y=Math.min(y,B.x)),B.y>l.y&&(v=Math.min(v,B.y))}),Number.isFinite(y)&&(l.w=y-l.x),Number.isFinite(v)&&(l.h=v-l.y)}}w||(l.w=p,l.h=d),e==="resizestart"||e==="resizemove"?(t.placeholder.i=s,t.placeholder.x=n,t.placeholder.y=f,t.placeholder.w=l.w,t.placeholder.h=l.h,a.nextTick(()=>{t.isDragging=!0}),r.emit("updateWidth",t.width)):a.nextTick(()=>{t.isDragging=!1}),o.responsive&&A(),u.compact(i.value,o.verticalCompact),r.emit("compact"),m(),e==="resizeend"&&c("layout-updated",i.value)}function A(){const e=x.getBreakpointFromWidth(o.breakpoints,t.width),s=x.getColsFromBreakpoint(e,o.cols);!h.isNull(t.lastBreakpoint)&&!t.layouts[t.lastBreakpoint]&&(t.layouts[t.lastBreakpoint]=u.cloneLayout(i.value));const n=x.findOrGenerateResponsiveLayout(t.originalLayout,t.layouts,o.breakpoints,e,t.lastBreakpoint,s,o.verticalCompact);t.layouts[e]=n,t.lastBreakpoint!==e&&c("breakpoint-changed",e,n),c("update:layout",n),t.lastBreakpoint=e,r.emit("setColNum",x.getColsFromBreakpoint(e,o.cols))}function E(){t.layouts=Object.assign({},o.responsiveLayouts)}function j(e,s){const n=new Set(s.map(l=>l.i)),f=new Set(e.map(l=>l.i)),d=e.filter(l=>!n.has(l.i)),p=s.filter(l=>!f.has(l.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(i.value,n=>(a.openBlock(),a.createBlock(S,a.mergeProps({key:n.i},n),{default:a.withCtx(()=>[a.renderSlot(e.$slots,"item",{item:n})]),_: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=U;
//# sourceMappingURL=grid-layout.vue.js.map