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