grid-layout-plus-no-pnpm/lib/components/grid-item.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"),c=require("@vexip-ui/utils"),v=require("../helpers/common.js"),W=require("../helpers/draggable.js"),Me=require("../helpers/responsive.js"),he=require("../helpers/dom.js"),pe=require("interactjs"),Ne=a.defineComponent({__name:"grid-item",props:{isDraggable:{type:Boolean,default:null},isResizable:{type:Boolean,default:null},isBounded:{type:Boolean,default:null},static:{type:Boolean,default:!1},minH:{type:Number,default:1},minW:{type:Number,default:1},maxH:{type:Number,default:1/0},maxW:{type:Number,default:1/0},x:{type:Number,required:!0},y:{type:Number,required:!0},w:{type:Number,required:!0},h:{type:Number,required:!0},i:{type:[Number,String],required:!0},dragIgnoreFrom:{type:String,default:"a, button"},dragAllowFrom:{type:String,default:null},resizeIgnoreFrom:{type:String,default:"a, button"},preserveAspectRatio:{type:Boolean,default:!1},dragOption:{type:Object,default:()=>({})},resizeOption:{type:Object,default:()=>({})}},emits:["container-resized","resize","resized","move","moved"],setup(we,{expose:be,emit:M}){const i=we,g=a.inject(v.LAYOUT_KEY),u=a.inject(v.EMITTER_KEY);if(!g)throw new Error("[grid-layout-plus]: missing layout store, GridItem must under a GridLayout.");const d=a.ref(null),e=a.reactive({cols:1,containerWidth:100,rowHeight:30,margin:[10,10],maxRows:1/0,draggable:null,resizable:null,bounded:null,transformScale:1,useCssTransforms:!0,useStyleCursor:!0,isDragging:!1,dragging:{top:-1,left:-1},isResizing:!1,resizing:{width:-1,height:-1},style:{},rtl:!1});let A=!1,Y=!1,L=NaN,X=NaN,_=NaN,j=NaN,$=-1,G=-1,K=-1,V=-1,p=i.x,y=i.y,w=i.w,x=i.h;const N=a.ref(),J=a.reactive({i:a.toRef(i,"i"),state:e,wrapper:N,calcXY:I});function Q(t){ve(t)}function Z(){fe()}function U(t){c.isNull(i.isDraggable)&&(e.draggable=t)}function ee(t){c.isNull(i.isResizable)&&(e.resizable=t)}function te(t){c.isNull(i.isBounded)&&(e.bounded=t)}function ie(t){e.transformScale=t}function re(t){e.rowHeight=t}function ne(t){e.maxRows=t}function ae(){e.rtl=he.getDocumentDir()==="rtl",fe()}function oe(t){e.cols=Math.floor(t)}g.increaseItem(J),a.onBeforeMount(()=>{e.rtl=he.getDocumentDir()==="rtl"}),a.onMounted(()=>{g.responsive&&g.lastBreakpoint?e.cols=Me.getColsFromBreakpoint(g.lastBreakpoint,g.cols):e.cols=g.colNum,e.rowHeight=g.rowHeight,e.containerWidth=g.width!==null?g.width:100,e.margin=g.margin!==void 0?g.margin:[10,10],e.maxRows=g.maxRows,c.isNull(i.isDraggable)?e.draggable=g.isDraggable:e.draggable=i.isDraggable,c.isNull(i.isResizable)?e.resizable=g.isResizable:e.resizable=i.isResizable,c.isNull(i.isBounded)?e.bounded=g.isBounded:e.bounded=i.isBounded,e.transformScale=g.transformScale,e.useCssTransforms=g.useCssTransforms,e.useStyleCursor=g.useStyleCursor,a.watchEffect(()=>{p=i.x,y=i.y,x=i.h,w=i.w,c.nextTickOnce(S)}),u.on("updateWidth",Q),u.on("compact",Z),u.on("setDraggable",U),u.on("setResizable",ee),u.on("setBounded",te),u.on("setTransformScale",ie),u.on("setRowHeight",re),u.on("setMaxRows",ne),u.on("directionchange",ae),u.on("setColNum",oe)}),a.onBeforeUnmount(()=>{u.off("updateWidth",Q),u.off("compact",Z),u.off("setDraggable",U),u.off("setResizable",ee),u.off("setBounded",te),u.off("setTransformScale",ie),u.off("setRowHeight",re),u.off("setMaxRows",ne),u.off("directionchange",ae),u.off("setColNum",oe),d.value&&(d.value.unset(),d.value=null),g.decreaseItem(J)}),be({state:e,wrapper:N});const ze=navigator.userAgent.toLowerCase().includes("android"),se=a.computed(()=>e.resizable&&!i.static),h=a.computed(()=>g.isMirrored?!e.rtl:e.rtl),ye=a.computed(()=>(e.draggable||e.resizable)&&!i.static),z=v.useNameHelper("item"),xe=a.computed(()=>({[z.b()]:!0,[z.bm("resizable")]:se.value,[z.bm("static")]:i.static,[z.bm("resizing")]:e.isResizing,[z.bm("dragging")]:e.isDragging,[z.bm("transform")]:e.useCssTransforms,[z.bm("rtl")]:h.value,[z.bm("no-touch")]:ze&&ye.value})),D=a.computed(()=>[z.be("resizer"),h.value&&z.bem("resizer","rtl")].filter(Boolean));a.watch(()=>i.isDraggable,t=>{e.draggable=t}),a.watch(()=>i.static,()=>{c.nextTickOnce(me),c.nextTickOnce(H)}),a.watch(()=>e.draggable,()=>{c.nextTickOnce(me)}),a.watch(()=>i.isResizable,t=>{e.resizable=t}),a.watch(()=>i.isBounded,t=>{e.bounded=t}),a.watch(()=>e.resizable,()=>{c.nextTickOnce(H)}),a.watch(()=>e.rowHeight,()=>{c.nextTickOnce(S),c.nextTickOnce(O)}),a.watch([()=>e.cols,()=>e.containerWidth],()=>{c.nextTickOnce(H),c.nextTickOnce(S),c.nextTickOnce(O)}),a.watch([()=>i.minH,()=>i.maxH,()=>i.minW,()=>i.maxW],()=>{c.nextTickOnce(H)}),a.watch(h,()=>{c.nextTickOnce(H),c.nextTickOnce(S)}),a.watch(()=>g.margin,t=>{!t||t[0]===e.margin[0]&&t[1]===e.margin[1]||(e.margin=t.map(Number),c.nextTickOnce(S),c.nextTickOnce(O))});function S(){i.x+i.w>e.cols?(p=0,w=i.w>e.cols?e.cols:i.w):(p=i.x,w=i.w);const t=T(p,y,w,x);e.isDragging&&(t.top=e.dragging.top,h.value?t.right=e.dragging.left:t.left=e.dragging.left),e.isResizing&&(t.width=e.resizing.width,t.height=e.resizing.height);let n;e.useCssTransforms?h.value?n=v.setTransformRtl(t.top,t.right,t.width,t.height):n=v.setTransform(t.top,t.left,t.width,t.height):h.value?n=v.setTopRight(t.top,t.right,t.width,t.height):n=v.setTopLeft(t.top,t.left,t.width,t.height),e.style=n}function O(){const t={};for(const n of["width","height"]){const s=e.style[n].match(/^(\d+)px$/);if(!s)return;t[n]=s[1]}M("container-resized",i.i,i.h,i.w,t.height,t.width)}function le(t){if(i.static)return;const n=t.type;if(n==="resizestart"&&e.isResizing||n!=="resizestart"&&!e.isResizing)return;const l=W.getControlPosition(t);if(c.isNull(l))return;const{x:s,y:f}=l,o={width:0,height:0};let r;switch(n){case"resizestart":{H(),$=w,G=x,r=T(p,y,w,x),o.width=r.width,o.height=r.height,e.resizing=o,e.isResizing=!0;break}case"resizemove":{const m=W.createCoreData(_,j,s,f);h.value?o.width=e.resizing.width-m.deltaX/e.transformScale:o.width=e.resizing.width+m.deltaX/e.transformScale,o.height=e.resizing.height+m.deltaY/e.transformScale,e.resizing=o;break}case"resizeend":{r=T(p,y,w,x),o.width=r.width,o.height=r.height,e.resizing={width:-1,height:-1},e.isResizing=!1;break}}r=Re(o.height,o.width),r.w<i.minW&&(r.w=i.minW),r.w>i.maxW&&(r.w=i.maxW),r.h<i.minH&&(r.h=i.minH),r.h>i.maxH&&(r.h=i.maxH),r.h<1&&(r.h=1),r.w<1&&(r.w=1),_=s,j=f,(w!==r.w||x!==r.h)&&M("resize",i.i,r.h,r.w,o.height,o.width),t.type==="resizeend"&&($!==w||G!==x)&&M("resized",i.i,r.h,r.w,o.height,o.width),u.emit("resizeEvent",t.type,i.i,p,y,r.h,r.w)}function ce(t){if(i.static||e.isResizing)return;const n=t.type;if(n==="dragstart"&&e.isDragging||n!=="dragstart"&&!e.isDragging)return;const l=W.getControlPosition(t);if(c.isNull(l))return;const{x:s,y:f}=l,o=t.target;if(!o.offsetParent)return;const r={top:0,left:0};switch(n){case"dragstart":{K=p,V=y;const b=o.offsetParent.getBoundingClientRect(),R=o.getBoundingClientRect(),k=R.left/e.transformScale,B=b.left/e.transformScale,E=R.right/e.transformScale,q=b.right/e.transformScale,F=R.top/e.transformScale,P=b.top/e.transformScale;h.value?r.left=(E-q)*-1:r.left=k-B,r.top=F-P,e.dragging=r,e.isDragging=!0;break}case"dragmove":{const b=W.createCoreData(L,X,s,f);if(h.value?r.left=e.dragging.left-b.deltaX/e.transformScale:r.left=e.dragging.left+b.deltaX/e.transformScale,r.top=e.dragging.top+b.deltaY/e.transformScale,e.bounded){const R=o.offsetParent.clientHeight-ge(i.h,e.rowHeight,e.margin[1]);r.top=ue(r.top,0,R);const k=C(),B=e.containerWidth-ge(i.w,k,e.margin[0]);r.left=ue(r.left,0,B)}e.dragging=r;break}case"dragend":{const b=o.offsetParent.getBoundingClientRect(),R=o.getBoundingClientRect(),k=R.left/e.transformScale,B=b.left/e.transformScale,E=R.right/e.transformScale,q=b.right/e.transformScale,F=R.top/e.transformScale,P=b.top/e.transformScale;h.value?r.left=(E-q)*-1:r.left=k-B,r.top=F-P,e.dragging={top:-1,left:-1},e.isDragging=!1;break}}let m;h.value,m=I(r.top,r.left),L=s,X=f,(p!==m.x||y!==m.y)&&M("move",i.i,m.x,m.y),t.type==="dragend"&&(K!==p||V!==y)&&M("moved",i.i,m.x,m.y),u.emit("dragEvent",t.type,i.i,m.x,m.y,x,w)}function T(t,n,l,s){const f=C();let o;return h.value?o={right:Math.round(f*t+(t+1)*e.margin[0]),top:Math.round(e.rowHeight*n+(n+1)*e.margin[1]),width:l===1/0?l:Math.round(f*l+Math.max(0,l-1)*e.margin[0]),height:s===1/0?s:Math.round(e.rowHeight*s+Math.max(0,s-1)*e.margin[1])}:o={left:Math.round(f*t+(t+1)*e.margin[0]),top:Math.round(e.rowHeight*n+(n+1)*e.margin[1]),width:l===1/0?l:Math.round(f*l+Math.max(0,l-1)*e.margin[0]),height:s===1/0?s:Math.round(e.rowHeight*s+Math.max(0,s-1)*e.margin[1])},o}function I(t,n){const l=C();let s=Math.round((n-e.margin[0])/(l+e.margin[0])),f=Math.round((t-e.margin[1])/(e.rowHeight+e.margin[1]));return s=Math.max(Math.min(s,e.cols-w),0),f=Math.max(Math.min(f,e.maxRows-x),0),{x:s,y:f}}function C(){return(e.containerWidth-e.margin[0]*(e.cols+1))/e.cols}function ge(t,n,l){return Number.isFinite(t)?Math.round(n*t+Math.max(0,t-1)*l):t}function ue(t,n,l){return Math.max(Math.min(t,l),n)}function Re(t,n,l=!1){const s=C();let f=Math.round((n+e.margin[0])/(s+e.margin[0])),o=0;return l?o=Math.ceil((t+e.margin[1])/(e.rowHeight+e.margin[1])):o=Math.round((t+e.margin[1])/(e.rowHeight+e.margin[1])),f=Math.max(Math.min(f,e.cols-p),0),o=Math.max(Math.min(o,e.maxRows-y),0),{w:f,h:o}}function ve(t,n){e.containerWidth=t,n!=null&&(e.cols=n)}function fe(){S()}function de(){!d.value&&N.value&&(d.value=pe(N.value),e.useStyleCursor||d.value.styleCursor(!1))}const Se=c.throttle(ce);function me(){if(de(),!!d.value)if(e.draggable&&!i.static){const t={ignoreFrom:i.dragIgnoreFrom,allowFrom:i.dragAllowFrom,...i.dragOption};d.value.draggable(t),A||(A=!0,d.value.on("dragstart dragmove dragend",n=>{n.type==="dragmove"?Se(n):ce(n)}))}else d.value.draggable({enabled:!1})}const He=c.throttle(le);function H(){if(de(),!!d.value)if(e.resizable&&!i.static){const t=T(0,0,i.maxW,i.maxH),n=T(0,0,i.minW,i.minH),l={edges:{left:!1,right:`.${D.value[0]}`,bottom:`.${D.value[0]}`,top:!1},ignoreFrom:i.resizeIgnoreFrom,restrictSize:{min:{height:n.height*e.transformScale,width:n.width*e.transformScale},max:{height:t.height*e.transformScale,width:t.width*e.transformScale}},...i.resizeOption};i.preserveAspectRatio&&(l.modifiers=[pe.modifiers.aspectRatio({ratio:"preserve"})]),d.value.resizable(l),Y||(Y=!0,d.value.on("resizestart resizemove resizeend",s=>{s.type==="resizemove"?He(s):le(s)}))}else d.value.resizable({enabled:!1})}return(t,n)=>(a.openBlock(),a.createElementBlock("section",{ref_key:"wrapper",ref:N,class:a.normalizeClass(a.unref(xe)),style:a.normalizeStyle(e.style)},[a.renderSlot(t.$slots,"default"),a.unref(se)?(a.openBlock(),a.createElementBlock("span",{key:0,class:a.normalizeClass(a.unref(D))},null,2)):a.createCommentVNode("",!0)],6))}});module.exports=Ne;
//# sourceMappingURL=grid-item.vue.js.map