Socket
Socket
Sign inDemoInstall

vue-re-resizable

Package Overview
Dependencies
Maintainers
1
Versions
3
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue-re-resizable - npm Package Compare versions

Comparing version 6.9.19-beta.2 to 6.9.19-beta.4

2

dist/main.iife.js

@@ -1,1 +0,1 @@

var VueReResizable=function(Z,l){"use strict";const oe={width:"auto",height:"auto"},A=(t,c,o)=>Math.max(Math.min(t,o),c),ne=(t,c)=>Math.round(t/c)*c,L=(t,c)=>new RegExp(t,"i").test(c),F=t=>Boolean(t.touches&&t.touches.length),he=t=>t.clientX!==void 0&&t.clientY!==void 0,se=(t,c,o=0)=>{const r=c.reduce((s,b,x)=>Math.abs(b-t)<Math.abs(c[s]-t)?x:s,0),u=Math.abs(c[r]-t);return o===0||u<o?c[r]:t},q=t=>(t=t.toString(),t==="auto"||t.endsWith("px")||t.endsWith("%")||t.endsWith("vh")||t.endsWith("vw")||t.endsWith("vmax")||t.endsWith("vmin")?t:`${t}px`),T=(t,c,o,r)=>{if(t&&typeof t=="string"){if(t.endsWith("px"))return Number(t.replace("px",""));if(t.endsWith("%")){const u=Number(t.replace("%",""))/100;return c*u}if(t.endsWith("vw")){const u=Number(t.replace("vw",""))/100;return o*u}if(t.endsWith("vh")){const u=Number(t.replace("vh",""))/100;return r*u}}return t},de=(t,c,o,r,u,s,b)=>(r=T(r,t.width,c,o),u=T(u,t.height,c,o),s=T(s,t.width,c,o),b=T(b,t.height,c,o),{maxWidth:typeof r>"u"?void 0:Number(r),maxHeight:typeof u>"u"?void 0:Number(u),minWidth:typeof s>"u"?void 0:Number(s),minHeight:typeof b>"u"?void 0:Number(b)}),fe=l.defineComponent({__name:"Resizer",props:{direction:null},emits:["resize:start"],setup(t,{emit:c}){return(o,r)=>(l.openBlock(),l.createElementBlock("div",{class:l.normalizeClass(["resizer",`resizer-${t.direction}`]),onMousedown:r[0]||(r[0]=u=>c("resize:start",u)),onTouchstart:r[1]||(r[1]=u=>c("resize:start",u))},[l.renderSlot(o.$slots,"default",{},void 0,!0)],34))}}),Re="",ve=((t,c)=>{const o=t.__vccOpts||t;for(const[r,u]of c)o[r]=u;return o})(fe,[["__scopeId","data-v-ab2e16f7"]]),ge=l.defineComponent({__name:"Resizable",props:{grid:{default:[1,1]},snap:null,snapGap:{default:0},bounds:null,boundsByDirection:{type:Boolean},size:null,minWidth:null,minHeight:null,maxWidth:null,maxHeight:null,lockAspectRatio:{type:[Boolean,Number],default:!1},lockAspectRatioExtraWidth:{default:0},lockAspectRatioExtraHeight:{default:0},enable:{default:{top:!0,right:!0,bottom:!0,left:!0,topRight:!0,bottomRight:!0,bottomLeft:!0,topLeft:!0}},resizerStyles:null,resizerClasses:null,defaultSize:null,scale:{default:1},resizeRatio:{default:1}},emits:["resize:start","resize:stop","resize"],setup(t,{emit:c}){const o=t,r=l.ref(),u=l.computed(()=>{var e;return(e=r.value)==null?void 0:e.parentNode}),s=l.computed(()=>{var e;return(e=r.value)==null?void 0:e.ownerDocument.defaultView}),b=l.computed(()=>{var i,a,h,v,p,d,m,f;const e=(v=(h=(i=o.size)==null?void 0:i.width)!=null?h:(a=o.defaultSize)==null?void 0:a.width)!=null?v:oe.width,n=(f=(m=(p=o.size)==null?void 0:p.height)!=null?m:(d=o.defaultSize)==null?void 0:d.height)!=null?f:oe.height;return{width:e,height:n}}),x={get value(){let e=0,n=0;if(r.value&&s.value){const i=r.value.offsetWidth,a=r.value.offsetHeight,h=r.value.style.position;h!=="relative"&&(r.value.style.position="relative"),e=r.value.style.width!=="auto"?r.value.offsetWidth:i,n=r.value.style.height!=="auto"?r.value.offsetHeight:a,r.value.style.position=h}return{width:e,height:n}}},le="__resizable_base__",pe=()=>{const e=s.value;if(!e)return null;const n=u.value;if(!n)return null;const i=e.document.createElement("div");return i.style.width="100%",i.style.height="100%",i.style.position="absolute",i.style.transform="scale(0, 0)",i.style.left="0",i.style.flex="0 0 100%",i.classList?i.classList.add(le):i.className+=le,n.appendChild(i),i},me=e=>{const n=u.value;!n||n.removeChild(e)};function ae(){if(!u.value)return s.value?{width:s.value.innerWidth,height:s.value.innerHeight}:{width:0,height:0};const e=pe();if(!e)return{width:0,height:0};let n=!1;const i=u.value.style.flexWrap;i!=="wrap"&&(n=!0,u.value.style.flexWrap="wrap"),e.style.position="relative",e.style.minWidth="100%",e.style.minHeight="100%";const a={width:e.offsetWidth,height:e.offsetHeight};return n&&(u.value.style.flexWrap=i),me(e),a}function re(e,n){if(e.value===void 0||e.value==="auto")return"auto";if(b.value[n].toString().endsWith("%")){if(e.value.toString().endsWith("%"))return e.value.toString();const i=ae();return`${Number(e.value.toString().replace("px",""))/i[n]*100}%`}return q(e.value)}const we=l.computed(()=>{const{size:e}=o,n=e&&typeof e.width<"u"&&!k.value?q(e.width):re(y,"width"),i=e&&typeof e.height<"u"&&!k.value?q(e.height):re(R,"height");return{width:n,height:i}}),k=l.ref(!1),S=l.ref("right"),g=l.reactive({x:0,y:0,width:0,height:0}),y=l.ref(b.value.width),R=l.ref(b.value.height),J=l.reactive({height:"100%",width:"100%",backgroundColor:"rgba(0,0,0,0)",cursor:"auto",opacity:0,position:"fixed",zIndex:9999,top:"0",left:"0",bottom:"0",right:"0"}),D=l.ref();let K,M=1,Q=0,ee=0,G=0,P=0,X=0,Y=0,te=0,ie=0;l.onMounted(()=>{var n,i;const e=s.value.getComputedStyle(r.value);y.value=(n=y.value)!=null?n:x.value.width,R.value=(i=R.value)!=null?i:x.value.height,D.value=e.flexBasis!=="auto"?e.flexBasis:void 0}),l.onBeforeMount(()=>{ce()});function be(){if(o.bounds==="parent"){const e=u.value;if(e){const n=e.getBoundingClientRect();Q=n.left,ee=n.top}}if(o.bounds&&typeof o.bounds!="string"){const e=o.bounds.getBoundingClientRect();te=e.left,ie=e.top}if(r.value){const{left:e,top:n,right:i,bottom:a}=r.value.getBoundingClientRect();G=e,P=i,X=n,Y=a}}function ye(e,n){const i=o.scale||1,a=o.resizeRatio||1,{lockAspectRatio:h,lockAspectRatioExtraHeight:v,lockAspectRatioExtraWidth:p}=o;let d=g.width,m=g.height;const f=v||0,w=p||0;return L("right",S.value)&&(d=g.width+(e-g.x)*a/i,h&&(m=(d-w)/M+f)),L("left",S.value)&&(d=g.width-(e-g.x)*a/i,h&&(m=(d-w)/M+f)),L("bottom",S.value)&&(m=g.height+(n-g.y)*a/i,h&&(d=(m-f)*M+w)),L("top",S.value)&&(m=g.height-(n-g.y)*a/i,h&&(d=(m-f)*M+w)),{newWidth:d,newHeight:m}}function ze(e,n){const{boundsByDirection:i}=o,a=i&&L("left",S.value),h=i&&L("top",S.value);let v,p;if(o.bounds==="parent"){const d=u.value;d&&(v=a?P-Q:d.offsetWidth+(Q-G),p=h?Y-ee:d.offsetHeight+(ee-X))}else o.bounds==="window"?s.value&&(v=a?P:s.value.innerWidth-G,p=h?Y:s.value.innerHeight-X):o.bounds&&(v=a?P-te:o.bounds.offsetWidth+(te-G),p=h?Y-ie:o.bounds.offsetHeight+(ie-X));return v&&Number.isFinite(v)&&(e=e&&e<v?e:v),p&&Number.isFinite(p)&&(n=n&&n<p?n:p),{maxWidth:e,maxHeight:n}}function xe(e,n,i,a){var I,W;const{lockAspectRatio:h,lockAspectRatioExtraHeight:v,lockAspectRatioExtraWidth:p}=o,d=(I=a.width)!=null?I:10,m=i.width===void 0||i.width<0?e:i.width,f=(W=a.height)!=null?W:10,w=i.height===void 0||i.height<0?n:i.height,E=v||0,C=p||0;if(h){const H=(f-E)*M+C,B=(w-E)*M+C,N=(d-C)/M+E,O=(m-C)/M+E,j=Math.max(d,H),z=Math.min(m,B),U=Math.max(f,N),$=Math.min(w,O);e=A(e,j,z),n=A(n,U,$)}else e=A(e,d,m),n=A(n,f,w);return{newWidth:e,newHeight:n}}function ue(e,n,i){const a=b.value[i];return n.value==="auto"&&g[i]===e&&(a===void 0||a==="auto")?"auto":e}function We(e,n){if(!s.value)return;let i=0,a=0;if(he(e)?(i=e.clientX,a=e.clientY):F(e)&&(i=e.touches[0].clientX,a=e.touches[0].clientY),c("resize:start",{event:e,direction:n,el:r.value})===!1)return;o.size&&(o.size.height!==void 0&&o.size.height!==R.value&&(R.value=o.size.height),o.size.width!==void 0&&o.size.width!==y.value&&(y.value=o.size.width)),M=typeof o.lockAspectRatio=="number"?o.lockAspectRatio:x.value.width/x.value.height;let h;const v=s.value.getComputedStyle(r.value);if(v.flexBasis!=="auto"){const p=u.value;p&&(K=s.value.getComputedStyle(p).flexDirection.startsWith("row")?"row":"column",h=v.flexBasis)}be(),Se(),g.x=i,g.y=a,g.width=x.value.width,g.height=x.value.height,k.value=!0,J.cursor=s.value.getComputedStyle(e.target).cursor||"auto",S.value=n,D.value=h}function _(e){var i,a;if(!k.value||!r.value)return;const n={width:x.value.width-g.width,height:x.value.height-g.height};c("resize:stop",{event:e,direction:S.value,el:r.value,delta:n}),o.size&&(((i=o.size)==null?void 0:i.width)!==void 0&&(y.value=o.size.width),((a=o.size)==null?void 0:a.height)!==void 0&&(y.value=o.size.height)),ce(),k.value=!1,J.cursor="auto"}function V(e){var O,j;if(!k.value||!s.value)return;if(s.value.TouchEvent&&F(e))try{e.preventDefault(),e.stopPropagation()}catch{}let{maxWidth:n,maxHeight:i,minWidth:a,minHeight:h}=o;const v=F(e)?e.touches[0].clientX:e.clientX,p=F(e)?e.touches[0].clientY:e.clientY,d=ae(),m=de(d,s.value.innerWidth,s.value.innerHeight,n,i,a,h);n=m.maxWidth,i=m.maxHeight,a=m.minWidth,h=m.minHeight;let{newHeight:f,newWidth:w}=ye(v,p);const E=ze(n,i);(O=o.snap)!=null&&O.x&&(w=se(w,o.snap.x,o.snapGap)),(j=o.snap)!=null&&j.y&&(f=se(f,o.snap.y,o.snapGap));const C=xe(w,f,{width:E.maxWidth,height:E.maxHeight},{width:a,height:h});if(w=C.newWidth,f=C.newHeight,o.grid){const z=ne(w,o.grid[0]),U=ne(f,o.grid[1]),$=o.snapGap||0;w=$===0||Math.abs(z-w)<=$?z:w,f=$===0||Math.abs(U-f)<=$?U:f}const I={width:w-g.width,height:f-g.height};let W=w;const H=y.value;H&&typeof H=="string"&&(H.endsWith("%")?W=`${W/d.width*100}%`:H.endsWith("vw")?W=`${W/s.value.innerWidth*100}vw`:H.endsWith("vh")&&(W=`${W/s.value.innerHeight*100}vh`));let B=f;const N=R.value;N&&typeof N=="string"&&(N.endsWith("%")?B=`${B/d.height*100}%`:N.endsWith("vw")?B=`${B/s.value.innerWidth*100}vw`:N.endsWith("vh")&&(B=`${B/s.value.innerHeight*100}vh`)),y.value=ue(W,y,"width"),R.value=ue(B,R,"height"),K==="row"?D.value=y.value:K==="column"&&(D.value=R.value),c("resize",{event:e,direction:S.value,el:r.value,delta:I})}function Se(){s.value&&(s.value.addEventListener("mouseup",_),s.value.addEventListener("mousemove",V),s.value.addEventListener("mouseleave",_),s.value.addEventListener("touchmove",V,{capture:!0,passive:!1}),s.value.addEventListener("touchend",_))}function ce(){s.value&&(s.value.removeEventListener("mouseup",_),s.value.removeEventListener("mousemove",V),s.value.removeEventListener("mouseleave",_),s.value.removeEventListener("touchmove",V,!0),s.value.removeEventListener("touchend",_))}return(e,n)=>(l.openBlock(),l.createElementBlock("div",{ref_key:"resizable",ref:r,style:l.normalizeStyle({position:"relative",userSelect:k.value?"none":"auto",...l.unref(we),maxWidth:t.maxWidth,maxHeight:t.maxHeight,minWidth:t.minWidth,minHeight:t.minHeight,boxSizing:"border-box",flexShrink:0,flexBasis:D.value})},[k.value?(l.openBlock(),l.createElementBlock("div",{key:0,style:l.normalizeStyle(J)},null,4)):l.createCommentVNode("",!0),l.renderSlot(e.$slots,"default"),t.enable?(l.openBlock(!0),l.createElementBlock(l.Fragment,{key:1},l.renderList(Object.entries(t.enable).filter(([i,a])=>a),([i])=>{var a,h;return l.openBlock(),l.createBlock(ve,{key:i,direction:i,"onResize:start":v=>We(v,i),style:l.normalizeStyle((a=t.resizerStyles)==null?void 0:a[i]),class:l.normalizeClass((h=t.resizerClasses)==null?void 0:h[i])},{default:l.withCtx(()=>[l.renderSlot(e.$slots,`resizer-${i}`)]),_:2},1032,["direction","onResize:start","style","class"])}),128)):l.createCommentVNode("",!0)],4))}});return Z.Resizable=ge,Object.defineProperties(Z,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}}),Z}({},Vue);
var VueReResizable=function(q,s){"use strict";const ne={width:"auto",height:"auto"},F=(t,c,v)=>Math.max(Math.min(t,v),c),se=(t,c)=>Math.round(t/c)*c,L=(t,c)=>new RegExp(t,"i").test(c),T=t=>Boolean(t.touches&&t.touches.length),de=t=>t.clientX!==void 0&&t.clientY!==void 0,le=(t,c,v=0)=>{const o=c.reduce((b,a,_)=>Math.abs(a-t)<Math.abs(c[b]-t)?_:b,0),l=Math.abs(c[o]-t);return v===0||l<v?c[o]:t},J=t=>(t=t.toString(),t==="auto"||t.endsWith("px")||t.endsWith("%")||t.endsWith("vh")||t.endsWith("vw")||t.endsWith("vmax")||t.endsWith("vmin")?t:`${t}px`),G=(t,c,v,o)=>{if(t&&typeof t=="string"){if(t.endsWith("px"))return Number(t.replace("px",""));if(t.endsWith("%")){const l=Number(t.replace("%",""))/100;return c*l}if(t.endsWith("vw")){const l=Number(t.replace("vw",""))/100;return v*l}if(t.endsWith("vh")){const l=Number(t.replace("vh",""))/100;return o*l}}return t},fe=(t,c,v,o,l,b,a)=>(o=G(o,t.width,c,v),l=G(l,t.height,c,v),b=G(b,t.width,c,v),a=G(a,t.height,c,v),{maxWidth:typeof o>"u"?void 0:Number(o),maxHeight:typeof l>"u"?void 0:Number(l),minWidth:typeof b>"u"?void 0:Number(b),minHeight:typeof a>"u"?void 0:Number(a)}),ve=s.defineComponent({__name:"Resizer",props:{direction:null},emits:["resize:start"],setup(t,{emit:c}){return(v,o)=>(s.openBlock(),s.createElementBlock("div",{class:s.normalizeClass(["resizer",`resizer-${t.direction}`]),onMousedown:o[0]||(o[0]=l=>c("resize:start",l)),onTouchstart:o[1]||(o[1]=l=>c("resize:start",l))},[s.renderSlot(v.$slots,"default",{},void 0,!0)],34))}}),Me="",ge=((t,c)=>{const v=t.__vccOpts||t;for(const[o,l]of c)v[o]=l;return v})(ve,[["__scopeId","data-v-ab2e16f7"]]),pe=s.defineComponent({__name:"Resizable",props:{grid:{default:[1,1]},snap:null,snapGap:{default:0},bounds:null,boundsByDirection:{type:Boolean},size:null,minWidth:null,minHeight:null,maxWidth:null,maxHeight:null,lockAspectRatio:{type:[Boolean,Number],default:!1},lockAspectRatioExtraWidth:{default:0},lockAspectRatioExtraHeight:{default:0},enable:{default:{top:!0,right:!0,bottom:!0,left:!0,topRight:!0,bottomRight:!0,bottomLeft:!0,topLeft:!0}},resizerStyles:null,resizerClasses:null,defaultSize:null,scale:{default:1},resizeRatio:{default:1}},emits:["resize:start","resize:stop","resize"],setup(t,{expose:c,emit:v}){const o=t,l=s.ref(),b=s.computed(()=>{var e;return(e=l.value)==null?void 0:e.parentNode}),a=s.computed(()=>{var e;return(e=l.value)==null?void 0:e.ownerDocument.defaultView}),_=s.computed(()=>{var i,r,u,f,p,h,m,d;const e=(f=(u=(i=o.size)==null?void 0:i.width)!=null?u:(r=o.defaultSize)==null?void 0:r.width)!=null?f:ne.width,n=(d=(m=(p=o.size)==null?void 0:p.height)!=null?m:(h=o.defaultSize)==null?void 0:h.height)!=null?d:ne.height;return{width:e,height:n}}),B={get value(){let e=0,n=0;if(l.value&&a.value){const i=l.value.offsetWidth,r=l.value.offsetHeight,u=l.value.style.position;u!=="relative"&&(l.value.style.position="relative"),e=l.value.style.width!=="auto"?l.value.offsetWidth:i,n=l.value.style.height!=="auto"?l.value.offsetHeight:r,l.value.style.position=u}return{width:e,height:n}}},ae="__resizable_base__",me=()=>{const e=a.value;if(!e)return null;const n=b.value;if(!n)return null;const i=e.document.createElement("div");return i.style.width="100%",i.style.height="100%",i.style.position="absolute",i.style.transform="scale(0, 0)",i.style.left="0",i.style.flex="0 0 100%",i.classList?i.classList.add(ae):i.className+=ae,n.appendChild(i),i},we=e=>{const n=b.value;!n||n.removeChild(e)};function re(){if(!b.value)return a.value?{width:a.value.innerWidth,height:a.value.innerHeight}:{width:0,height:0};const e=me();if(!e)return{width:0,height:0};let n=!1;const i=b.value.style.flexWrap;i!=="wrap"&&(n=!0,b.value.style.flexWrap="wrap"),e.style.position="relative",e.style.minWidth="100%",e.style.minHeight="100%";const r={width:e.offsetWidth,height:e.offsetHeight};return n&&(b.value.style.flexWrap=i),we(e),r}function ue(e,n){if(e.value===void 0||e.value==="auto")return"auto";if(_.value[n].toString().endsWith("%")){if(e.value.toString().endsWith("%"))return e.value.toString();const i=re();return`${Number(e.value.toString().replace("px",""))/i[n]*100}%`}return J(e.value)}const be=s.computed(()=>{const{size:e}=o,n=e&&typeof e.width<"u"&&!k.value?J(e.width):ue(y,"width"),i=e&&typeof e.height<"u"&&!k.value?J(e.height):ue(x,"height");return{width:n,height:i}}),k=s.ref(!1),S=s.ref("right"),g=s.reactive({x:0,y:0,width:0,height:0}),y=s.ref(_.value.width),x=s.ref(_.value.height);c({width:y,height:x});const K=s.reactive({height:"100%",width:"100%",backgroundColor:"rgba(0,0,0,0)",cursor:"auto",opacity:0,position:"fixed",zIndex:9999,top:"0",left:"0",bottom:"0",right:"0"}),A=s.ref();let Q,R=1,ee=0,te=0,P=0,X=0,Y=0,V=0,ie=0,oe=0;s.onMounted(()=>{var n,i;const e=a.value.getComputedStyle(l.value);y.value=(n=y.value)!=null?n:B.value.width,x.value=(i=x.value)!=null?i:B.value.height,A.value=e.flexBasis!=="auto"?e.flexBasis:void 0}),s.onBeforeMount(()=>{he()});function ye(){if(o.bounds==="parent"){const e=b.value;if(e){const n=e.getBoundingClientRect();ee=n.left,te=n.top}}if(o.bounds&&typeof o.bounds!="string"){const e=o.bounds.getBoundingClientRect();ie=e.left,oe=e.top}if(l.value){const{left:e,top:n,right:i,bottom:r}=l.value.getBoundingClientRect();P=e,X=i,Y=n,V=r}}function ze(e,n){const i=o.scale||1,r=o.resizeRatio||1,{lockAspectRatio:u,lockAspectRatioExtraHeight:f,lockAspectRatioExtraWidth:p}=o;let h=g.width,m=g.height;const d=f||0,w=p||0;return L("right",S.value)&&(h=g.width+(e-g.x)*r/i,u&&(m=(h-w)/R+d)),L("left",S.value)&&(h=g.width-(e-g.x)*r/i,u&&(m=(h-w)/R+d)),L("bottom",S.value)&&(m=g.height+(n-g.y)*r/i,u&&(h=(m-d)*R+w)),L("top",S.value)&&(m=g.height-(n-g.y)*r/i,u&&(h=(m-d)*R+w)),{newWidth:h,newHeight:m}}function xe(e,n){const{boundsByDirection:i}=o,r=i&&L("left",S.value),u=i&&L("top",S.value);let f,p;if(o.bounds==="parent"){const h=b.value;h&&(f=r?X-ee:h.offsetWidth+(ee-P),p=u?V-te:h.offsetHeight+(te-Y))}else o.bounds==="window"?a.value&&(f=r?X:a.value.innerWidth-P,p=u?V:a.value.innerHeight-Y):o.bounds&&(f=r?X-ie:o.bounds.offsetWidth+(ie-P),p=u?V-oe:o.bounds.offsetHeight+(oe-Y));return f&&Number.isFinite(f)&&(e=e&&e<f?e:f),p&&Number.isFinite(p)&&(n=n&&n<p?n:p),{maxWidth:e,maxHeight:n}}function We(e,n,i,r){var O,W;const{lockAspectRatio:u,lockAspectRatioExtraHeight:f,lockAspectRatioExtraWidth:p}=o,h=(O=r.width)!=null?O:10,m=i.width===void 0||i.width<0?e:i.width,d=(W=r.height)!=null?W:10,w=i.height===void 0||i.height<0?n:i.height,E=f||0,C=p||0;if(u){const H=(d-E)*R+C,M=(w-E)*R+C,N=(h-C)/R+E,j=(m-C)/R+E,U=Math.max(h,H),z=Math.min(m,M),Z=Math.max(d,N),D=Math.min(w,j);e=F(e,U,z),n=F(n,Z,D)}else e=F(e,h,m),n=F(n,d,w);return{newWidth:e,newHeight:n}}function ce(e,n,i){const r=_.value[i];return n.value==="auto"&&g[i]===e&&(r===void 0||r==="auto")?"auto":e}function Se(e,n){if(!a.value)return;let i=0,r=0;if(de(e)?(i=e.clientX,r=e.clientY):T(e)&&(i=e.touches[0].clientX,r=e.touches[0].clientY),v("resize:start",{event:e,direction:n,el:l.value})===!1)return;o.size&&(o.size.height!==void 0&&o.size.height!==x.value&&(x.value=o.size.height),o.size.width!==void 0&&o.size.width!==y.value&&(y.value=o.size.width)),R=typeof o.lockAspectRatio=="number"?o.lockAspectRatio:B.value.width/B.value.height;let u;const f=a.value.getComputedStyle(l.value);if(f.flexBasis!=="auto"){const p=b.value;p&&(Q=a.value.getComputedStyle(p).flexDirection.startsWith("row")?"row":"column",u=f.flexBasis)}ye(),Re(),g.x=i,g.y=r,g.width=B.value.width,g.height=B.value.height,k.value=!0,K.cursor=a.value.getComputedStyle(e.target).cursor||"auto",S.value=n,A.value=u}function $(e){var i,r;if(!k.value||!l.value)return;const n={width:B.value.width-g.width,height:B.value.height-g.height};v("resize:stop",{event:e,direction:S.value,el:l.value,delta:n}),o.size&&(((i=o.size)==null?void 0:i.width)!==void 0&&(y.value=o.size.width),((r=o.size)==null?void 0:r.height)!==void 0&&(y.value=o.size.height)),he(),k.value=!1,K.cursor="auto"}function I(e){var j,U;if(!k.value||!a.value)return;if(a.value.TouchEvent&&T(e))try{e.preventDefault(),e.stopPropagation()}catch{}let{maxWidth:n,maxHeight:i,minWidth:r,minHeight:u}=o;const f=T(e)?e.touches[0].clientX:e.clientX,p=T(e)?e.touches[0].clientY:e.clientY,h=re(),m=fe(h,a.value.innerWidth,a.value.innerHeight,n,i,r,u);n=m.maxWidth,i=m.maxHeight,r=m.minWidth,u=m.minHeight;let{newHeight:d,newWidth:w}=ze(f,p);const E=xe(n,i);(j=o.snap)!=null&&j.x&&(w=le(w,o.snap.x,o.snapGap)),(U=o.snap)!=null&&U.y&&(d=le(d,o.snap.y,o.snapGap));const C=We(w,d,{width:E.maxWidth,height:E.maxHeight},{width:r,height:u});if(w=C.newWidth,d=C.newHeight,o.grid){const z=se(w,o.grid[0]),Z=se(d,o.grid[1]),D=o.snapGap||0;w=D===0||Math.abs(z-w)<=D?z:w,d=D===0||Math.abs(Z-d)<=D?Z:d}const O={width:w-g.width,height:d-g.height};let W=w;const H=y.value;H&&typeof H=="string"&&(H.endsWith("%")?W=`${W/h.width*100}%`:H.endsWith("vw")?W=`${W/a.value.innerWidth*100}vw`:H.endsWith("vh")&&(W=`${W/a.value.innerHeight*100}vh`));let M=d;const N=x.value;N&&typeof N=="string"&&(N.endsWith("%")?M=`${M/h.height*100}%`:N.endsWith("vw")?M=`${M/a.value.innerWidth*100}vw`:N.endsWith("vh")&&(M=`${M/a.value.innerHeight*100}vh`)),y.value=ce(W,y,"width"),x.value=ce(M,x,"height"),Q==="row"?A.value=y.value:Q==="column"&&(A.value=x.value),v("resize",{event:e,direction:S.value,el:l.value,delta:O})}function Re(){a.value&&(a.value.addEventListener("mouseup",$),a.value.addEventListener("mousemove",I),a.value.addEventListener("mouseleave",$),a.value.addEventListener("touchmove",I,{capture:!0,passive:!1}),a.value.addEventListener("touchend",$))}function he(){a.value&&(a.value.removeEventListener("mouseup",$),a.value.removeEventListener("mousemove",I),a.value.removeEventListener("mouseleave",$),a.value.removeEventListener("touchmove",I,!0),a.value.removeEventListener("touchend",$))}return(e,n)=>(s.openBlock(),s.createElementBlock("div",{ref_key:"resizable",ref:l,style:s.normalizeStyle({position:"relative",userSelect:k.value?"none":"auto",...s.unref(be),maxWidth:t.maxWidth,maxHeight:t.maxHeight,minWidth:t.minWidth,minHeight:t.minHeight,boxSizing:"border-box",flexShrink:0,flexBasis:A.value})},[k.value?(s.openBlock(),s.createElementBlock("div",{key:0,style:s.normalizeStyle(K)},null,4)):s.createCommentVNode("",!0),s.renderSlot(e.$slots,"default"),t.enable?(s.openBlock(!0),s.createElementBlock(s.Fragment,{key:1},s.renderList(Object.entries(t.enable).filter(([i,r])=>r),([i])=>{var r,u;return s.openBlock(),s.createBlock(ge,{key:i,direction:i,"onResize:start":f=>Se(f,i),style:s.normalizeStyle((r=t.resizerStyles)==null?void 0:r[i]),class:s.normalizeClass((u=t.resizerClasses)==null?void 0:u[i])},{default:s.withCtx(()=>[s.renderSlot(e.$slots,`resizer-${i}`)]),_:2},1032,["direction","onResize:start","style","class"])}),128)):s.createCommentVNode("",!0)],4))}});return q.Resizable=pe,Object.defineProperties(q,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}}),q}({},Vue);

2

dist/main.js

@@ -1,1 +0,1 @@

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("vue"),ae={width:"auto",height:"auto"},V=(t,c,o)=>Math.max(Math.min(t,o),c),ue=(t,c)=>Math.round(t/c)*c,$=(t,c)=>new RegExp(t,"i").test(c),j=t=>Boolean(t.touches&&t.touches.length),be=t=>t.clientX!==void 0&&t.clientY!==void 0,re=(t,c,o=0)=>{const u=c.reduce((s,b,x)=>Math.abs(b-t)<Math.abs(c[s]-t)?x:s,0),r=Math.abs(c[u]-t);return o===0||r<o?c[u]:t},te=t=>(t=t.toString(),t==="auto"||t.endsWith("px")||t.endsWith("%")||t.endsWith("vh")||t.endsWith("vw")||t.endsWith("vmax")||t.endsWith("vmin")?t:`${t}px`),U=(t,c,o,u)=>{if(t&&typeof t=="string"){if(t.endsWith("px"))return Number(t.replace("px",""));if(t.endsWith("%")){const r=Number(t.replace("%",""))/100;return c*r}if(t.endsWith("vw")){const r=Number(t.replace("vw",""))/100;return o*r}if(t.endsWith("vh")){const r=Number(t.replace("vh",""))/100;return u*r}}return t},ye=(t,c,o,u,r,s,b)=>(u=U(u,t.width,c,o),r=U(r,t.height,c,o),s=U(s,t.width,c,o),b=U(b,t.height,c,o),{maxWidth:typeof u>"u"?void 0:Number(u),maxHeight:typeof r>"u"?void 0:Number(r),minWidth:typeof s>"u"?void 0:Number(s),minHeight:typeof b>"u"?void 0:Number(b)}),ze=a.defineComponent({__name:"Resizer",props:{direction:null},emits:["resize:start"],setup(t,{emit:c}){return(o,u)=>(a.openBlock(),a.createElementBlock("div",{class:a.normalizeClass(["resizer",`resizer-${t.direction}`]),onMousedown:u[0]||(u[0]=r=>c("resize:start",r)),onTouchstart:u[1]||(u[1]=r=>c("resize:start",r))},[a.renderSlot(o.$slots,"default",{},void 0,!0)],34))}});const xe=(t,c)=>{const o=t.__vccOpts||t;for(const[u,r]of c)o[u]=r;return o},We=xe(ze,[["__scopeId","data-v-ab2e16f7"]]),Se=a.defineComponent({__name:"Resizable",props:{grid:{default:[1,1]},snap:null,snapGap:{default:0},bounds:null,boundsByDirection:{type:Boolean},size:null,minWidth:null,minHeight:null,maxWidth:null,maxHeight:null,lockAspectRatio:{type:[Boolean,Number],default:!1},lockAspectRatioExtraWidth:{default:0},lockAspectRatioExtraHeight:{default:0},enable:{default:{top:!0,right:!0,bottom:!0,left:!0,topRight:!0,bottomRight:!0,bottomLeft:!0,topLeft:!0}},resizerStyles:null,resizerClasses:null,defaultSize:null,scale:{default:1},resizeRatio:{default:1}},emits:["resize:start","resize:stop","resize"],setup(t,{emit:c}){const o=t,u=a.ref(),r=a.computed(()=>{var e;return(e=u.value)==null?void 0:e.parentNode}),s=a.computed(()=>{var e;return(e=u.value)==null?void 0:e.ownerDocument.defaultView}),b=a.computed(()=>{var i,l,h,f,p,d,m,v;const e=(f=(h=(i=o.size)==null?void 0:i.width)!=null?h:(l=o.defaultSize)==null?void 0:l.width)!=null?f:ae.width,n=(v=(m=(p=o.size)==null?void 0:p.height)!=null?m:(d=o.defaultSize)==null?void 0:d.height)!=null?v:ae.height;return{width:e,height:n}}),x={get value(){let e=0,n=0;if(u.value&&s.value){const i=u.value.offsetWidth,l=u.value.offsetHeight,h=u.value.style.position;h!=="relative"&&(u.value.style.position="relative"),e=u.value.style.width!=="auto"?u.value.offsetWidth:i,n=u.value.style.height!=="auto"?u.value.offsetHeight:l,u.value.style.position=h}return{width:e,height:n}}},ie="__resizable_base__",ce=()=>{const e=s.value;if(!e)return null;const n=r.value;if(!n)return null;const i=e.document.createElement("div");return i.style.width="100%",i.style.height="100%",i.style.position="absolute",i.style.transform="scale(0, 0)",i.style.left="0",i.style.flex="0 0 100%",i.classList?i.classList.add(ie):i.className+=ie,n.appendChild(i),i},he=e=>{const n=r.value;!n||n.removeChild(e)};function oe(){if(!r.value)return s.value?{width:s.value.innerWidth,height:s.value.innerHeight}:{width:0,height:0};const e=ce();if(!e)return{width:0,height:0};let n=!1;const i=r.value.style.flexWrap;i!=="wrap"&&(n=!0,r.value.style.flexWrap="wrap"),e.style.position="relative",e.style.minWidth="100%",e.style.minHeight="100%";const l={width:e.offsetWidth,height:e.offsetHeight};return n&&(r.value.style.flexWrap=i),he(e),l}function ne(e,n){if(e.value===void 0||e.value==="auto")return"auto";if(b.value[n].toString().endsWith("%")){if(e.value.toString().endsWith("%"))return e.value.toString();const i=oe();return`${Number(e.value.toString().replace("px",""))/i[n]*100}%`}return te(e.value)}const de=a.computed(()=>{const{size:e}=o,n=e&&typeof e.width<"u"&&!k.value?te(e.width):ne(y,"width"),i=e&&typeof e.height<"u"&&!k.value?te(e.height):ne(R,"height");return{width:n,height:i}}),k=a.ref(!1),S=a.ref("right"),g=a.reactive({x:0,y:0,width:0,height:0}),y=a.ref(b.value.width),R=a.ref(b.value.height),q=a.reactive({height:"100%",width:"100%",backgroundColor:"rgba(0,0,0,0)",cursor:"auto",opacity:0,position:"fixed",zIndex:9999,top:"0",left:"0",bottom:"0",right:"0"}),D=a.ref();let Z,M=1,J=0,K=0,A=0,F=0,T=0,G=0,Q=0,ee=0;a.onMounted(()=>{var n,i;const e=s.value.getComputedStyle(u.value);y.value=(n=y.value)!=null?n:x.value.width,R.value=(i=R.value)!=null?i:x.value.height,D.value=e.flexBasis!=="auto"?e.flexBasis:void 0}),a.onBeforeMount(()=>{le()});function ve(){if(o.bounds==="parent"){const e=r.value;if(e){const n=e.getBoundingClientRect();J=n.left,K=n.top}}if(o.bounds&&typeof o.bounds!="string"){const e=o.bounds.getBoundingClientRect();Q=e.left,ee=e.top}if(u.value){const{left:e,top:n,right:i,bottom:l}=u.value.getBoundingClientRect();A=e,F=i,T=n,G=l}}function fe(e,n){const i=o.scale||1,l=o.resizeRatio||1,{lockAspectRatio:h,lockAspectRatioExtraHeight:f,lockAspectRatioExtraWidth:p}=o;let d=g.width,m=g.height;const v=f||0,w=p||0;return $("right",S.value)&&(d=g.width+(e-g.x)*l/i,h&&(m=(d-w)/M+v)),$("left",S.value)&&(d=g.width-(e-g.x)*l/i,h&&(m=(d-w)/M+v)),$("bottom",S.value)&&(m=g.height+(n-g.y)*l/i,h&&(d=(m-v)*M+w)),$("top",S.value)&&(m=g.height-(n-g.y)*l/i,h&&(d=(m-v)*M+w)),{newWidth:d,newHeight:m}}function ge(e,n){const{boundsByDirection:i}=o,l=i&&$("left",S.value),h=i&&$("top",S.value);let f,p;if(o.bounds==="parent"){const d=r.value;d&&(f=l?F-J:d.offsetWidth+(J-A),p=h?G-K:d.offsetHeight+(K-T))}else o.bounds==="window"?s.value&&(f=l?F:s.value.innerWidth-A,p=h?G:s.value.innerHeight-T):o.bounds&&(f=l?F-Q:o.bounds.offsetWidth+(Q-A),p=h?G-ee:o.bounds.offsetHeight+(ee-T));return f&&Number.isFinite(f)&&(e=e&&e<f?e:f),p&&Number.isFinite(p)&&(n=n&&n<p?n:p),{maxWidth:e,maxHeight:n}}function pe(e,n,i,l){var X,W;const{lockAspectRatio:h,lockAspectRatioExtraHeight:f,lockAspectRatioExtraWidth:p}=o,d=(X=l.width)!=null?X:10,m=i.width===void 0||i.width<0?e:i.width,v=(W=l.height)!=null?W:10,w=i.height===void 0||i.height<0?n:i.height,E=f||0,C=p||0;if(h){const H=(v-E)*M+C,B=(w-E)*M+C,N=(d-C)/M+E,Y=(m-C)/M+E,I=Math.max(d,H),z=Math.min(m,B),O=Math.max(v,N),_=Math.min(w,Y);e=V(e,I,z),n=V(n,O,_)}else e=V(e,d,m),n=V(n,v,w);return{newWidth:e,newHeight:n}}function se(e,n,i){const l=b.value[i];return n.value==="auto"&&g[i]===e&&(l===void 0||l==="auto")?"auto":e}function me(e,n){if(!s.value)return;let i=0,l=0;if(be(e)?(i=e.clientX,l=e.clientY):j(e)&&(i=e.touches[0].clientX,l=e.touches[0].clientY),c("resize:start",{event:e,direction:n,el:u.value})===!1)return;o.size&&(o.size.height!==void 0&&o.size.height!==R.value&&(R.value=o.size.height),o.size.width!==void 0&&o.size.width!==y.value&&(y.value=o.size.width)),M=typeof o.lockAspectRatio=="number"?o.lockAspectRatio:x.value.width/x.value.height;let h;const f=s.value.getComputedStyle(u.value);if(f.flexBasis!=="auto"){const p=r.value;p&&(Z=s.value.getComputedStyle(p).flexDirection.startsWith("row")?"row":"column",h=f.flexBasis)}ve(),we(),g.x=i,g.y=l,g.width=x.value.width,g.height=x.value.height,k.value=!0,q.cursor=s.value.getComputedStyle(e.target).cursor||"auto",S.value=n,D.value=h}function L(e){var i,l;if(!k.value||!u.value)return;const n={width:x.value.width-g.width,height:x.value.height-g.height};c("resize:stop",{event:e,direction:S.value,el:u.value,delta:n}),o.size&&(((i=o.size)==null?void 0:i.width)!==void 0&&(y.value=o.size.width),((l=o.size)==null?void 0:l.height)!==void 0&&(y.value=o.size.height)),le(),k.value=!1,q.cursor="auto"}function P(e){var Y,I;if(!k.value||!s.value)return;if(s.value.TouchEvent&&j(e))try{e.preventDefault(),e.stopPropagation()}catch{}let{maxWidth:n,maxHeight:i,minWidth:l,minHeight:h}=o;const f=j(e)?e.touches[0].clientX:e.clientX,p=j(e)?e.touches[0].clientY:e.clientY,d=oe(),m=ye(d,s.value.innerWidth,s.value.innerHeight,n,i,l,h);n=m.maxWidth,i=m.maxHeight,l=m.minWidth,h=m.minHeight;let{newHeight:v,newWidth:w}=fe(f,p);const E=ge(n,i);(Y=o.snap)!=null&&Y.x&&(w=re(w,o.snap.x,o.snapGap)),(I=o.snap)!=null&&I.y&&(v=re(v,o.snap.y,o.snapGap));const C=pe(w,v,{width:E.maxWidth,height:E.maxHeight},{width:l,height:h});if(w=C.newWidth,v=C.newHeight,o.grid){const z=ue(w,o.grid[0]),O=ue(v,o.grid[1]),_=o.snapGap||0;w=_===0||Math.abs(z-w)<=_?z:w,v=_===0||Math.abs(O-v)<=_?O:v}const X={width:w-g.width,height:v-g.height};let W=w;const H=y.value;H&&typeof H=="string"&&(H.endsWith("%")?W=`${W/d.width*100}%`:H.endsWith("vw")?W=`${W/s.value.innerWidth*100}vw`:H.endsWith("vh")&&(W=`${W/s.value.innerHeight*100}vh`));let B=v;const N=R.value;N&&typeof N=="string"&&(N.endsWith("%")?B=`${B/d.height*100}%`:N.endsWith("vw")?B=`${B/s.value.innerWidth*100}vw`:N.endsWith("vh")&&(B=`${B/s.value.innerHeight*100}vh`)),y.value=se(W,y,"width"),R.value=se(B,R,"height"),Z==="row"?D.value=y.value:Z==="column"&&(D.value=R.value),c("resize",{event:e,direction:S.value,el:u.value,delta:X})}function we(){s.value&&(s.value.addEventListener("mouseup",L),s.value.addEventListener("mousemove",P),s.value.addEventListener("mouseleave",L),s.value.addEventListener("touchmove",P,{capture:!0,passive:!1}),s.value.addEventListener("touchend",L))}function le(){s.value&&(s.value.removeEventListener("mouseup",L),s.value.removeEventListener("mousemove",P),s.value.removeEventListener("mouseleave",L),s.value.removeEventListener("touchmove",P,!0),s.value.removeEventListener("touchend",L))}return(e,n)=>(a.openBlock(),a.createElementBlock("div",{ref_key:"resizable",ref:u,style:a.normalizeStyle({position:"relative",userSelect:k.value?"none":"auto",...a.unref(de),maxWidth:t.maxWidth,maxHeight:t.maxHeight,minWidth:t.minWidth,minHeight:t.minHeight,boxSizing:"border-box",flexShrink:0,flexBasis:D.value})},[k.value?(a.openBlock(),a.createElementBlock("div",{key:0,style:a.normalizeStyle(q)},null,4)):a.createCommentVNode("",!0),a.renderSlot(e.$slots,"default"),t.enable?(a.openBlock(!0),a.createElementBlock(a.Fragment,{key:1},a.renderList(Object.entries(t.enable).filter(([i,l])=>l),([i])=>{var l,h;return a.openBlock(),a.createBlock(We,{key:i,direction:i,"onResize:start":f=>me(f,i),style:a.normalizeStyle((l=t.resizerStyles)==null?void 0:l[i]),class:a.normalizeClass((h=t.resizerClasses)==null?void 0:h[i])},{default:a.withCtx(()=>[a.renderSlot(e.$slots,`resizer-${i}`)]),_:2},1032,["direction","onResize:start","style","class"])}),128)):a.createCommentVNode("",!0)],4))}});exports.Resizable=Se;
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("vue"),ue={width:"auto",height:"auto"},j=(t,c,f)=>Math.max(Math.min(t,f),c),re=(t,c)=>Math.round(t/c)*c,D=(t,c)=>new RegExp(t,"i").test(c),U=t=>Boolean(t.touches&&t.touches.length),ye=t=>t.clientX!==void 0&&t.clientY!==void 0,ce=(t,c,f=0)=>{const o=c.reduce((b,l,L)=>Math.abs(l-t)<Math.abs(c[b]-t)?L:b,0),s=Math.abs(c[o]-t);return f===0||s<f?c[o]:t},ie=t=>(t=t.toString(),t==="auto"||t.endsWith("px")||t.endsWith("%")||t.endsWith("vh")||t.endsWith("vw")||t.endsWith("vmax")||t.endsWith("vmin")?t:`${t}px`),q=(t,c,f,o)=>{if(t&&typeof t=="string"){if(t.endsWith("px"))return Number(t.replace("px",""));if(t.endsWith("%")){const s=Number(t.replace("%",""))/100;return c*s}if(t.endsWith("vw")){const s=Number(t.replace("vw",""))/100;return f*s}if(t.endsWith("vh")){const s=Number(t.replace("vh",""))/100;return o*s}}return t},ze=(t,c,f,o,s,b,l)=>(o=q(o,t.width,c,f),s=q(s,t.height,c,f),b=q(b,t.width,c,f),l=q(l,t.height,c,f),{maxWidth:typeof o>"u"?void 0:Number(o),maxHeight:typeof s>"u"?void 0:Number(s),minWidth:typeof b>"u"?void 0:Number(b),minHeight:typeof l>"u"?void 0:Number(l)}),xe=u.defineComponent({__name:"Resizer",props:{direction:null},emits:["resize:start"],setup(t,{emit:c}){return(f,o)=>(u.openBlock(),u.createElementBlock("div",{class:u.normalizeClass(["resizer",`resizer-${t.direction}`]),onMousedown:o[0]||(o[0]=s=>c("resize:start",s)),onTouchstart:o[1]||(o[1]=s=>c("resize:start",s))},[u.renderSlot(f.$slots,"default",{},void 0,!0)],34))}});const We=(t,c)=>{const f=t.__vccOpts||t;for(const[o,s]of c)f[o]=s;return f},Se=We(xe,[["__scopeId","data-v-ab2e16f7"]]),Re=u.defineComponent({__name:"Resizable",props:{grid:{default:[1,1]},snap:null,snapGap:{default:0},bounds:null,boundsByDirection:{type:Boolean},size:null,minWidth:null,minHeight:null,maxWidth:null,maxHeight:null,lockAspectRatio:{type:[Boolean,Number],default:!1},lockAspectRatioExtraWidth:{default:0},lockAspectRatioExtraHeight:{default:0},enable:{default:{top:!0,right:!0,bottom:!0,left:!0,topRight:!0,bottomRight:!0,bottomLeft:!0,topLeft:!0}},resizerStyles:null,resizerClasses:null,defaultSize:null,scale:{default:1},resizeRatio:{default:1}},emits:["resize:start","resize:stop","resize"],setup(t,{expose:c,emit:f}){const o=t,s=u.ref(),b=u.computed(()=>{var e;return(e=s.value)==null?void 0:e.parentNode}),l=u.computed(()=>{var e;return(e=s.value)==null?void 0:e.ownerDocument.defaultView}),L=u.computed(()=>{var i,a,r,v,p,h,m,d;const e=(v=(r=(i=o.size)==null?void 0:i.width)!=null?r:(a=o.defaultSize)==null?void 0:a.width)!=null?v:ue.width,n=(d=(m=(p=o.size)==null?void 0:p.height)!=null?m:(h=o.defaultSize)==null?void 0:h.height)!=null?d:ue.height;return{width:e,height:n}}),B={get value(){let e=0,n=0;if(s.value&&l.value){const i=s.value.offsetWidth,a=s.value.offsetHeight,r=s.value.style.position;r!=="relative"&&(s.value.style.position="relative"),e=s.value.style.width!=="auto"?s.value.offsetWidth:i,n=s.value.style.height!=="auto"?s.value.offsetHeight:a,s.value.style.position=r}return{width:e,height:n}}},oe="__resizable_base__",he=()=>{const e=l.value;if(!e)return null;const n=b.value;if(!n)return null;const i=e.document.createElement("div");return i.style.width="100%",i.style.height="100%",i.style.position="absolute",i.style.transform="scale(0, 0)",i.style.left="0",i.style.flex="0 0 100%",i.classList?i.classList.add(oe):i.className+=oe,n.appendChild(i),i},de=e=>{const n=b.value;!n||n.removeChild(e)};function ne(){if(!b.value)return l.value?{width:l.value.innerWidth,height:l.value.innerHeight}:{width:0,height:0};const e=he();if(!e)return{width:0,height:0};let n=!1;const i=b.value.style.flexWrap;i!=="wrap"&&(n=!0,b.value.style.flexWrap="wrap"),e.style.position="relative",e.style.minWidth="100%",e.style.minHeight="100%";const a={width:e.offsetWidth,height:e.offsetHeight};return n&&(b.value.style.flexWrap=i),de(e),a}function se(e,n){if(e.value===void 0||e.value==="auto")return"auto";if(L.value[n].toString().endsWith("%")){if(e.value.toString().endsWith("%"))return e.value.toString();const i=ne();return`${Number(e.value.toString().replace("px",""))/i[n]*100}%`}return ie(e.value)}const ve=u.computed(()=>{const{size:e}=o,n=e&&typeof e.width<"u"&&!k.value?ie(e.width):se(y,"width"),i=e&&typeof e.height<"u"&&!k.value?ie(e.height):se(x,"height");return{width:n,height:i}}),k=u.ref(!1),S=u.ref("right"),g=u.reactive({x:0,y:0,width:0,height:0}),y=u.ref(L.value.width),x=u.ref(L.value.height);c({width:y,height:x});const Z=u.reactive({height:"100%",width:"100%",backgroundColor:"rgba(0,0,0,0)",cursor:"auto",opacity:0,position:"fixed",zIndex:9999,top:"0",left:"0",bottom:"0",right:"0"}),A=u.ref();let J,R=1,K=0,Q=0,F=0,T=0,G=0,P=0,ee=0,te=0;u.onMounted(()=>{var n,i;const e=l.value.getComputedStyle(s.value);y.value=(n=y.value)!=null?n:B.value.width,x.value=(i=x.value)!=null?i:B.value.height,A.value=e.flexBasis!=="auto"?e.flexBasis:void 0}),u.onBeforeMount(()=>{ae()});function fe(){if(o.bounds==="parent"){const e=b.value;if(e){const n=e.getBoundingClientRect();K=n.left,Q=n.top}}if(o.bounds&&typeof o.bounds!="string"){const e=o.bounds.getBoundingClientRect();ee=e.left,te=e.top}if(s.value){const{left:e,top:n,right:i,bottom:a}=s.value.getBoundingClientRect();F=e,T=i,G=n,P=a}}function ge(e,n){const i=o.scale||1,a=o.resizeRatio||1,{lockAspectRatio:r,lockAspectRatioExtraHeight:v,lockAspectRatioExtraWidth:p}=o;let h=g.width,m=g.height;const d=v||0,w=p||0;return D("right",S.value)&&(h=g.width+(e-g.x)*a/i,r&&(m=(h-w)/R+d)),D("left",S.value)&&(h=g.width-(e-g.x)*a/i,r&&(m=(h-w)/R+d)),D("bottom",S.value)&&(m=g.height+(n-g.y)*a/i,r&&(h=(m-d)*R+w)),D("top",S.value)&&(m=g.height-(n-g.y)*a/i,r&&(h=(m-d)*R+w)),{newWidth:h,newHeight:m}}function pe(e,n){const{boundsByDirection:i}=o,a=i&&D("left",S.value),r=i&&D("top",S.value);let v,p;if(o.bounds==="parent"){const h=b.value;h&&(v=a?T-K:h.offsetWidth+(K-F),p=r?P-Q:h.offsetHeight+(Q-G))}else o.bounds==="window"?l.value&&(v=a?T:l.value.innerWidth-F,p=r?P:l.value.innerHeight-G):o.bounds&&(v=a?T-ee:o.bounds.offsetWidth+(ee-F),p=r?P-te:o.bounds.offsetHeight+(te-G));return v&&Number.isFinite(v)&&(e=e&&e<v?e:v),p&&Number.isFinite(p)&&(n=n&&n<p?n:p),{maxWidth:e,maxHeight:n}}function me(e,n,i,a){var Y,W;const{lockAspectRatio:r,lockAspectRatioExtraHeight:v,lockAspectRatioExtraWidth:p}=o,h=(Y=a.width)!=null?Y:10,m=i.width===void 0||i.width<0?e:i.width,d=(W=a.height)!=null?W:10,w=i.height===void 0||i.height<0?n:i.height,E=v||0,C=p||0;if(r){const H=(d-E)*R+C,M=(w-E)*R+C,N=(h-C)/R+E,I=(m-C)/R+E,O=Math.max(h,H),z=Math.min(m,M),V=Math.max(d,N),$=Math.min(w,I);e=j(e,O,z),n=j(n,V,$)}else e=j(e,h,m),n=j(n,d,w);return{newWidth:e,newHeight:n}}function le(e,n,i){const a=L.value[i];return n.value==="auto"&&g[i]===e&&(a===void 0||a==="auto")?"auto":e}function we(e,n){if(!l.value)return;let i=0,a=0;if(ye(e)?(i=e.clientX,a=e.clientY):U(e)&&(i=e.touches[0].clientX,a=e.touches[0].clientY),f("resize:start",{event:e,direction:n,el:s.value})===!1)return;o.size&&(o.size.height!==void 0&&o.size.height!==x.value&&(x.value=o.size.height),o.size.width!==void 0&&o.size.width!==y.value&&(y.value=o.size.width)),R=typeof o.lockAspectRatio=="number"?o.lockAspectRatio:B.value.width/B.value.height;let r;const v=l.value.getComputedStyle(s.value);if(v.flexBasis!=="auto"){const p=b.value;p&&(J=l.value.getComputedStyle(p).flexDirection.startsWith("row")?"row":"column",r=v.flexBasis)}fe(),be(),g.x=i,g.y=a,g.width=B.value.width,g.height=B.value.height,k.value=!0,Z.cursor=l.value.getComputedStyle(e.target).cursor||"auto",S.value=n,A.value=r}function _(e){var i,a;if(!k.value||!s.value)return;const n={width:B.value.width-g.width,height:B.value.height-g.height};f("resize:stop",{event:e,direction:S.value,el:s.value,delta:n}),o.size&&(((i=o.size)==null?void 0:i.width)!==void 0&&(y.value=o.size.width),((a=o.size)==null?void 0:a.height)!==void 0&&(y.value=o.size.height)),ae(),k.value=!1,Z.cursor="auto"}function X(e){var I,O;if(!k.value||!l.value)return;if(l.value.TouchEvent&&U(e))try{e.preventDefault(),e.stopPropagation()}catch{}let{maxWidth:n,maxHeight:i,minWidth:a,minHeight:r}=o;const v=U(e)?e.touches[0].clientX:e.clientX,p=U(e)?e.touches[0].clientY:e.clientY,h=ne(),m=ze(h,l.value.innerWidth,l.value.innerHeight,n,i,a,r);n=m.maxWidth,i=m.maxHeight,a=m.minWidth,r=m.minHeight;let{newHeight:d,newWidth:w}=ge(v,p);const E=pe(n,i);(I=o.snap)!=null&&I.x&&(w=ce(w,o.snap.x,o.snapGap)),(O=o.snap)!=null&&O.y&&(d=ce(d,o.snap.y,o.snapGap));const C=me(w,d,{width:E.maxWidth,height:E.maxHeight},{width:a,height:r});if(w=C.newWidth,d=C.newHeight,o.grid){const z=re(w,o.grid[0]),V=re(d,o.grid[1]),$=o.snapGap||0;w=$===0||Math.abs(z-w)<=$?z:w,d=$===0||Math.abs(V-d)<=$?V:d}const Y={width:w-g.width,height:d-g.height};let W=w;const H=y.value;H&&typeof H=="string"&&(H.endsWith("%")?W=`${W/h.width*100}%`:H.endsWith("vw")?W=`${W/l.value.innerWidth*100}vw`:H.endsWith("vh")&&(W=`${W/l.value.innerHeight*100}vh`));let M=d;const N=x.value;N&&typeof N=="string"&&(N.endsWith("%")?M=`${M/h.height*100}%`:N.endsWith("vw")?M=`${M/l.value.innerWidth*100}vw`:N.endsWith("vh")&&(M=`${M/l.value.innerHeight*100}vh`)),y.value=le(W,y,"width"),x.value=le(M,x,"height"),J==="row"?A.value=y.value:J==="column"&&(A.value=x.value),f("resize",{event:e,direction:S.value,el:s.value,delta:Y})}function be(){l.value&&(l.value.addEventListener("mouseup",_),l.value.addEventListener("mousemove",X),l.value.addEventListener("mouseleave",_),l.value.addEventListener("touchmove",X,{capture:!0,passive:!1}),l.value.addEventListener("touchend",_))}function ae(){l.value&&(l.value.removeEventListener("mouseup",_),l.value.removeEventListener("mousemove",X),l.value.removeEventListener("mouseleave",_),l.value.removeEventListener("touchmove",X,!0),l.value.removeEventListener("touchend",_))}return(e,n)=>(u.openBlock(),u.createElementBlock("div",{ref_key:"resizable",ref:s,style:u.normalizeStyle({position:"relative",userSelect:k.value?"none":"auto",...u.unref(ve),maxWidth:t.maxWidth,maxHeight:t.maxHeight,minWidth:t.minWidth,minHeight:t.minHeight,boxSizing:"border-box",flexShrink:0,flexBasis:A.value})},[k.value?(u.openBlock(),u.createElementBlock("div",{key:0,style:u.normalizeStyle(Z)},null,4)):u.createCommentVNode("",!0),u.renderSlot(e.$slots,"default"),t.enable?(u.openBlock(!0),u.createElementBlock(u.Fragment,{key:1},u.renderList(Object.entries(t.enable).filter(([i,a])=>a),([i])=>{var a,r;return u.openBlock(),u.createBlock(Se,{key:i,direction:i,"onResize:start":v=>we(v,i),style:u.normalizeStyle((a=t.resizerStyles)==null?void 0:a[i]),class:u.normalizeClass((r=t.resizerClasses)==null?void 0:r[i])},{default:u.withCtx(()=>[u.renderSlot(e.$slots,`resizer-${i}`)]),_:2},1032,["direction","onResize:start","style","class"])}),128)):u.createCommentVNode("",!0)],4))}});exports.Resizable=Re;

2

dist/main.umd.js

@@ -1,1 +0,1 @@

(function(E,s){typeof exports=="object"&&typeof module<"u"?s(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],s):(E=typeof globalThis<"u"?globalThis:E||self,s(E.VueReResizable={},E.Vue))})(this,function(E,s){"use strict";const oe={width:"auto",height:"auto"},T=(t,c,o)=>Math.max(Math.min(t,o),c),ne=(t,c)=>Math.round(t/c)*c,_=(t,c)=>new RegExp(t,"i").test(c),F=t=>Boolean(t.touches&&t.touches.length),he=t=>t.clientX!==void 0&&t.clientY!==void 0,se=(t,c,o=0)=>{const r=c.reduce((l,b,x)=>Math.abs(b-t)<Math.abs(c[l]-t)?x:l,0),u=Math.abs(c[r]-t);return o===0||u<o?c[r]:t},Z=t=>(t=t.toString(),t==="auto"||t.endsWith("px")||t.endsWith("%")||t.endsWith("vh")||t.endsWith("vw")||t.endsWith("vmax")||t.endsWith("vmin")?t:`${t}px`),G=(t,c,o,r)=>{if(t&&typeof t=="string"){if(t.endsWith("px"))return Number(t.replace("px",""));if(t.endsWith("%")){const u=Number(t.replace("%",""))/100;return c*u}if(t.endsWith("vw")){const u=Number(t.replace("vw",""))/100;return o*u}if(t.endsWith("vh")){const u=Number(t.replace("vh",""))/100;return r*u}}return t},de=(t,c,o,r,u,l,b)=>(r=G(r,t.width,c,o),u=G(u,t.height,c,o),l=G(l,t.width,c,o),b=G(b,t.height,c,o),{maxWidth:typeof r>"u"?void 0:Number(r),maxHeight:typeof u>"u"?void 0:Number(u),minWidth:typeof l>"u"?void 0:Number(l),minHeight:typeof b>"u"?void 0:Number(b)}),fe=s.defineComponent({__name:"Resizer",props:{direction:null},emits:["resize:start"],setup(t,{emit:c}){return(o,r)=>(s.openBlock(),s.createElementBlock("div",{class:s.normalizeClass(["resizer",`resizer-${t.direction}`]),onMousedown:r[0]||(r[0]=u=>c("resize:start",u)),onTouchstart:r[1]||(r[1]=u=>c("resize:start",u))},[s.renderSlot(o.$slots,"default",{},void 0,!0)],34))}}),Re="",ve=((t,c)=>{const o=t.__vccOpts||t;for(const[r,u]of c)o[r]=u;return o})(fe,[["__scopeId","data-v-ab2e16f7"]]),pe=s.defineComponent({__name:"Resizable",props:{grid:{default:[1,1]},snap:null,snapGap:{default:0},bounds:null,boundsByDirection:{type:Boolean},size:null,minWidth:null,minHeight:null,maxWidth:null,maxHeight:null,lockAspectRatio:{type:[Boolean,Number],default:!1},lockAspectRatioExtraWidth:{default:0},lockAspectRatioExtraHeight:{default:0},enable:{default:{top:!0,right:!0,bottom:!0,left:!0,topRight:!0,bottomRight:!0,bottomLeft:!0,topLeft:!0}},resizerStyles:null,resizerClasses:null,defaultSize:null,scale:{default:1},resizeRatio:{default:1}},emits:["resize:start","resize:stop","resize"],setup(t,{emit:c}){const o=t,r=s.ref(),u=s.computed(()=>{var e;return(e=r.value)==null?void 0:e.parentNode}),l=s.computed(()=>{var e;return(e=r.value)==null?void 0:e.ownerDocument.defaultView}),b=s.computed(()=>{var i,a,h,v,g,d,m,f;const e=(v=(h=(i=o.size)==null?void 0:i.width)!=null?h:(a=o.defaultSize)==null?void 0:a.width)!=null?v:oe.width,n=(f=(m=(g=o.size)==null?void 0:g.height)!=null?m:(d=o.defaultSize)==null?void 0:d.height)!=null?f:oe.height;return{width:e,height:n}}),x={get value(){let e=0,n=0;if(r.value&&l.value){const i=r.value.offsetWidth,a=r.value.offsetHeight,h=r.value.style.position;h!=="relative"&&(r.value.style.position="relative"),e=r.value.style.width!=="auto"?r.value.offsetWidth:i,n=r.value.style.height!=="auto"?r.value.offsetHeight:a,r.value.style.position=h}return{width:e,height:n}}},le="__resizable_base__",ge=()=>{const e=l.value;if(!e)return null;const n=u.value;if(!n)return null;const i=e.document.createElement("div");return i.style.width="100%",i.style.height="100%",i.style.position="absolute",i.style.transform="scale(0, 0)",i.style.left="0",i.style.flex="0 0 100%",i.classList?i.classList.add(le):i.className+=le,n.appendChild(i),i},me=e=>{const n=u.value;!n||n.removeChild(e)};function ae(){if(!u.value)return l.value?{width:l.value.innerWidth,height:l.value.innerHeight}:{width:0,height:0};const e=ge();if(!e)return{width:0,height:0};let n=!1;const i=u.value.style.flexWrap;i!=="wrap"&&(n=!0,u.value.style.flexWrap="wrap"),e.style.position="relative",e.style.minWidth="100%",e.style.minHeight="100%";const a={width:e.offsetWidth,height:e.offsetHeight};return n&&(u.value.style.flexWrap=i),me(e),a}function re(e,n){if(e.value===void 0||e.value==="auto")return"auto";if(b.value[n].toString().endsWith("%")){if(e.value.toString().endsWith("%"))return e.value.toString();const i=ae();return`${Number(e.value.toString().replace("px",""))/i[n]*100}%`}return Z(e.value)}const we=s.computed(()=>{const{size:e}=o,n=e&&typeof e.width<"u"&&!k.value?Z(e.width):re(y,"width"),i=e&&typeof e.height<"u"&&!k.value?Z(e.height):re(R,"height");return{width:n,height:i}}),k=s.ref(!1),S=s.ref("right"),p=s.reactive({x:0,y:0,width:0,height:0}),y=s.ref(b.value.width),R=s.ref(b.value.height),J=s.reactive({height:"100%",width:"100%",backgroundColor:"rgba(0,0,0,0)",cursor:"auto",opacity:0,position:"fixed",zIndex:9999,top:"0",left:"0",bottom:"0",right:"0"}),A=s.ref();let K,M=1,Q=0,ee=0,P=0,X=0,Y=0,V=0,te=0,ie=0;s.onMounted(()=>{var n,i;const e=l.value.getComputedStyle(r.value);y.value=(n=y.value)!=null?n:x.value.width,R.value=(i=R.value)!=null?i:x.value.height,A.value=e.flexBasis!=="auto"?e.flexBasis:void 0}),s.onBeforeMount(()=>{ce()});function be(){if(o.bounds==="parent"){const e=u.value;if(e){const n=e.getBoundingClientRect();Q=n.left,ee=n.top}}if(o.bounds&&typeof o.bounds!="string"){const e=o.bounds.getBoundingClientRect();te=e.left,ie=e.top}if(r.value){const{left:e,top:n,right:i,bottom:a}=r.value.getBoundingClientRect();P=e,X=i,Y=n,V=a}}function ye(e,n){const i=o.scale||1,a=o.resizeRatio||1,{lockAspectRatio:h,lockAspectRatioExtraHeight:v,lockAspectRatioExtraWidth:g}=o;let d=p.width,m=p.height;const f=v||0,w=g||0;return _("right",S.value)&&(d=p.width+(e-p.x)*a/i,h&&(m=(d-w)/M+f)),_("left",S.value)&&(d=p.width-(e-p.x)*a/i,h&&(m=(d-w)/M+f)),_("bottom",S.value)&&(m=p.height+(n-p.y)*a/i,h&&(d=(m-f)*M+w)),_("top",S.value)&&(m=p.height-(n-p.y)*a/i,h&&(d=(m-f)*M+w)),{newWidth:d,newHeight:m}}function ze(e,n){const{boundsByDirection:i}=o,a=i&&_("left",S.value),h=i&&_("top",S.value);let v,g;if(o.bounds==="parent"){const d=u.value;d&&(v=a?X-Q:d.offsetWidth+(Q-P),g=h?V-ee:d.offsetHeight+(ee-Y))}else o.bounds==="window"?l.value&&(v=a?X:l.value.innerWidth-P,g=h?V:l.value.innerHeight-Y):o.bounds&&(v=a?X-te:o.bounds.offsetWidth+(te-P),g=h?V-ie:o.bounds.offsetHeight+(ie-Y));return v&&Number.isFinite(v)&&(e=e&&e<v?e:v),g&&Number.isFinite(g)&&(n=n&&n<g?n:g),{maxWidth:e,maxHeight:n}}function xe(e,n,i,a){var j,W;const{lockAspectRatio:h,lockAspectRatioExtraHeight:v,lockAspectRatioExtraWidth:g}=o,d=(j=a.width)!=null?j:10,m=i.width===void 0||i.width<0?e:i.width,f=(W=a.height)!=null?W:10,w=i.height===void 0||i.height<0?n:i.height,C=v||0,H=g||0;if(h){const N=(f-C)*M+H,B=(w-C)*M+H,L=(d-H)/M+C,O=(m-H)/M+C,U=Math.max(d,N),z=Math.min(m,B),q=Math.max(f,L),D=Math.min(w,O);e=T(e,U,z),n=T(n,q,D)}else e=T(e,d,m),n=T(n,f,w);return{newWidth:e,newHeight:n}}function ue(e,n,i){const a=b.value[i];return n.value==="auto"&&p[i]===e&&(a===void 0||a==="auto")?"auto":e}function We(e,n){if(!l.value)return;let i=0,a=0;if(he(e)?(i=e.clientX,a=e.clientY):F(e)&&(i=e.touches[0].clientX,a=e.touches[0].clientY),c("resize:start",{event:e,direction:n,el:r.value})===!1)return;o.size&&(o.size.height!==void 0&&o.size.height!==R.value&&(R.value=o.size.height),o.size.width!==void 0&&o.size.width!==y.value&&(y.value=o.size.width)),M=typeof o.lockAspectRatio=="number"?o.lockAspectRatio:x.value.width/x.value.height;let h;const v=l.value.getComputedStyle(r.value);if(v.flexBasis!=="auto"){const g=u.value;g&&(K=l.value.getComputedStyle(g).flexDirection.startsWith("row")?"row":"column",h=v.flexBasis)}be(),Se(),p.x=i,p.y=a,p.width=x.value.width,p.height=x.value.height,k.value=!0,J.cursor=l.value.getComputedStyle(e.target).cursor||"auto",S.value=n,A.value=h}function $(e){var i,a;if(!k.value||!r.value)return;const n={width:x.value.width-p.width,height:x.value.height-p.height};c("resize:stop",{event:e,direction:S.value,el:r.value,delta:n}),o.size&&(((i=o.size)==null?void 0:i.width)!==void 0&&(y.value=o.size.width),((a=o.size)==null?void 0:a.height)!==void 0&&(y.value=o.size.height)),ce(),k.value=!1,J.cursor="auto"}function I(e){var O,U;if(!k.value||!l.value)return;if(l.value.TouchEvent&&F(e))try{e.preventDefault(),e.stopPropagation()}catch{}let{maxWidth:n,maxHeight:i,minWidth:a,minHeight:h}=o;const v=F(e)?e.touches[0].clientX:e.clientX,g=F(e)?e.touches[0].clientY:e.clientY,d=ae(),m=de(d,l.value.innerWidth,l.value.innerHeight,n,i,a,h);n=m.maxWidth,i=m.maxHeight,a=m.minWidth,h=m.minHeight;let{newHeight:f,newWidth:w}=ye(v,g);const C=ze(n,i);(O=o.snap)!=null&&O.x&&(w=se(w,o.snap.x,o.snapGap)),(U=o.snap)!=null&&U.y&&(f=se(f,o.snap.y,o.snapGap));const H=xe(w,f,{width:C.maxWidth,height:C.maxHeight},{width:a,height:h});if(w=H.newWidth,f=H.newHeight,o.grid){const z=ne(w,o.grid[0]),q=ne(f,o.grid[1]),D=o.snapGap||0;w=D===0||Math.abs(z-w)<=D?z:w,f=D===0||Math.abs(q-f)<=D?q:f}const j={width:w-p.width,height:f-p.height};let W=w;const N=y.value;N&&typeof N=="string"&&(N.endsWith("%")?W=`${W/d.width*100}%`:N.endsWith("vw")?W=`${W/l.value.innerWidth*100}vw`:N.endsWith("vh")&&(W=`${W/l.value.innerHeight*100}vh`));let B=f;const L=R.value;L&&typeof L=="string"&&(L.endsWith("%")?B=`${B/d.height*100}%`:L.endsWith("vw")?B=`${B/l.value.innerWidth*100}vw`:L.endsWith("vh")&&(B=`${B/l.value.innerHeight*100}vh`)),y.value=ue(W,y,"width"),R.value=ue(B,R,"height"),K==="row"?A.value=y.value:K==="column"&&(A.value=R.value),c("resize",{event:e,direction:S.value,el:r.value,delta:j})}function Se(){l.value&&(l.value.addEventListener("mouseup",$),l.value.addEventListener("mousemove",I),l.value.addEventListener("mouseleave",$),l.value.addEventListener("touchmove",I,{capture:!0,passive:!1}),l.value.addEventListener("touchend",$))}function ce(){l.value&&(l.value.removeEventListener("mouseup",$),l.value.removeEventListener("mousemove",I),l.value.removeEventListener("mouseleave",$),l.value.removeEventListener("touchmove",I,!0),l.value.removeEventListener("touchend",$))}return(e,n)=>(s.openBlock(),s.createElementBlock("div",{ref_key:"resizable",ref:r,style:s.normalizeStyle({position:"relative",userSelect:k.value?"none":"auto",...s.unref(we),maxWidth:t.maxWidth,maxHeight:t.maxHeight,minWidth:t.minWidth,minHeight:t.minHeight,boxSizing:"border-box",flexShrink:0,flexBasis:A.value})},[k.value?(s.openBlock(),s.createElementBlock("div",{key:0,style:s.normalizeStyle(J)},null,4)):s.createCommentVNode("",!0),s.renderSlot(e.$slots,"default"),t.enable?(s.openBlock(!0),s.createElementBlock(s.Fragment,{key:1},s.renderList(Object.entries(t.enable).filter(([i,a])=>a),([i])=>{var a,h;return s.openBlock(),s.createBlock(ve,{key:i,direction:i,"onResize:start":v=>We(v,i),style:s.normalizeStyle((a=t.resizerStyles)==null?void 0:a[i]),class:s.normalizeClass((h=t.resizerClasses)==null?void 0:h[i])},{default:s.withCtx(()=>[s.renderSlot(e.$slots,`resizer-${i}`)]),_:2},1032,["direction","onResize:start","style","class"])}),128)):s.createCommentVNode("",!0)],4))}});E.Resizable=pe,Object.defineProperties(E,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
(function(E,s){typeof exports=="object"&&typeof module<"u"?s(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],s):(E=typeof globalThis<"u"?globalThis:E||self,s(E.VueReResizable={},E.Vue))})(this,function(E,s){"use strict";const ne={width:"auto",height:"auto"},F=(t,c,v)=>Math.max(Math.min(t,v),c),se=(t,c)=>Math.round(t/c)*c,_=(t,c)=>new RegExp(t,"i").test(c),G=t=>Boolean(t.touches&&t.touches.length),de=t=>t.clientX!==void 0&&t.clientY!==void 0,le=(t,c,v=0)=>{const o=c.reduce((b,a,$)=>Math.abs(a-t)<Math.abs(c[b]-t)?$:b,0),l=Math.abs(c[o]-t);return v===0||l<v?c[o]:t},J=t=>(t=t.toString(),t==="auto"||t.endsWith("px")||t.endsWith("%")||t.endsWith("vh")||t.endsWith("vw")||t.endsWith("vmax")||t.endsWith("vmin")?t:`${t}px`),P=(t,c,v,o)=>{if(t&&typeof t=="string"){if(t.endsWith("px"))return Number(t.replace("px",""));if(t.endsWith("%")){const l=Number(t.replace("%",""))/100;return c*l}if(t.endsWith("vw")){const l=Number(t.replace("vw",""))/100;return v*l}if(t.endsWith("vh")){const l=Number(t.replace("vh",""))/100;return o*l}}return t},fe=(t,c,v,o,l,b,a)=>(o=P(o,t.width,c,v),l=P(l,t.height,c,v),b=P(b,t.width,c,v),a=P(a,t.height,c,v),{maxWidth:typeof o>"u"?void 0:Number(o),maxHeight:typeof l>"u"?void 0:Number(l),minWidth:typeof b>"u"?void 0:Number(b),minHeight:typeof a>"u"?void 0:Number(a)}),ve=s.defineComponent({__name:"Resizer",props:{direction:null},emits:["resize:start"],setup(t,{emit:c}){return(v,o)=>(s.openBlock(),s.createElementBlock("div",{class:s.normalizeClass(["resizer",`resizer-${t.direction}`]),onMousedown:o[0]||(o[0]=l=>c("resize:start",l)),onTouchstart:o[1]||(o[1]=l=>c("resize:start",l))},[s.renderSlot(v.$slots,"default",{},void 0,!0)],34))}}),Me="",pe=((t,c)=>{const v=t.__vccOpts||t;for(const[o,l]of c)v[o]=l;return v})(ve,[["__scopeId","data-v-ab2e16f7"]]),ge=s.defineComponent({__name:"Resizable",props:{grid:{default:[1,1]},snap:null,snapGap:{default:0},bounds:null,boundsByDirection:{type:Boolean},size:null,minWidth:null,minHeight:null,maxWidth:null,maxHeight:null,lockAspectRatio:{type:[Boolean,Number],default:!1},lockAspectRatioExtraWidth:{default:0},lockAspectRatioExtraHeight:{default:0},enable:{default:{top:!0,right:!0,bottom:!0,left:!0,topRight:!0,bottomRight:!0,bottomLeft:!0,topLeft:!0}},resizerStyles:null,resizerClasses:null,defaultSize:null,scale:{default:1},resizeRatio:{default:1}},emits:["resize:start","resize:stop","resize"],setup(t,{expose:c,emit:v}){const o=t,l=s.ref(),b=s.computed(()=>{var e;return(e=l.value)==null?void 0:e.parentNode}),a=s.computed(()=>{var e;return(e=l.value)==null?void 0:e.ownerDocument.defaultView}),$=s.computed(()=>{var i,r,u,f,g,h,m,d;const e=(f=(u=(i=o.size)==null?void 0:i.width)!=null?u:(r=o.defaultSize)==null?void 0:r.width)!=null?f:ne.width,n=(d=(m=(g=o.size)==null?void 0:g.height)!=null?m:(h=o.defaultSize)==null?void 0:h.height)!=null?d:ne.height;return{width:e,height:n}}),B={get value(){let e=0,n=0;if(l.value&&a.value){const i=l.value.offsetWidth,r=l.value.offsetHeight,u=l.value.style.position;u!=="relative"&&(l.value.style.position="relative"),e=l.value.style.width!=="auto"?l.value.offsetWidth:i,n=l.value.style.height!=="auto"?l.value.offsetHeight:r,l.value.style.position=u}return{width:e,height:n}}},ae="__resizable_base__",me=()=>{const e=a.value;if(!e)return null;const n=b.value;if(!n)return null;const i=e.document.createElement("div");return i.style.width="100%",i.style.height="100%",i.style.position="absolute",i.style.transform="scale(0, 0)",i.style.left="0",i.style.flex="0 0 100%",i.classList?i.classList.add(ae):i.className+=ae,n.appendChild(i),i},we=e=>{const n=b.value;!n||n.removeChild(e)};function re(){if(!b.value)return a.value?{width:a.value.innerWidth,height:a.value.innerHeight}:{width:0,height:0};const e=me();if(!e)return{width:0,height:0};let n=!1;const i=b.value.style.flexWrap;i!=="wrap"&&(n=!0,b.value.style.flexWrap="wrap"),e.style.position="relative",e.style.minWidth="100%",e.style.minHeight="100%";const r={width:e.offsetWidth,height:e.offsetHeight};return n&&(b.value.style.flexWrap=i),we(e),r}function ue(e,n){if(e.value===void 0||e.value==="auto")return"auto";if($.value[n].toString().endsWith("%")){if(e.value.toString().endsWith("%"))return e.value.toString();const i=re();return`${Number(e.value.toString().replace("px",""))/i[n]*100}%`}return J(e.value)}const be=s.computed(()=>{const{size:e}=o,n=e&&typeof e.width<"u"&&!k.value?J(e.width):ue(y,"width"),i=e&&typeof e.height<"u"&&!k.value?J(e.height):ue(x,"height");return{width:n,height:i}}),k=s.ref(!1),S=s.ref("right"),p=s.reactive({x:0,y:0,width:0,height:0}),y=s.ref($.value.width),x=s.ref($.value.height);c({width:y,height:x});const K=s.reactive({height:"100%",width:"100%",backgroundColor:"rgba(0,0,0,0)",cursor:"auto",opacity:0,position:"fixed",zIndex:9999,top:"0",left:"0",bottom:"0",right:"0"}),T=s.ref();let Q,R=1,ee=0,te=0,X=0,Y=0,V=0,I=0,ie=0,oe=0;s.onMounted(()=>{var n,i;const e=a.value.getComputedStyle(l.value);y.value=(n=y.value)!=null?n:B.value.width,x.value=(i=x.value)!=null?i:B.value.height,T.value=e.flexBasis!=="auto"?e.flexBasis:void 0}),s.onBeforeMount(()=>{he()});function ye(){if(o.bounds==="parent"){const e=b.value;if(e){const n=e.getBoundingClientRect();ee=n.left,te=n.top}}if(o.bounds&&typeof o.bounds!="string"){const e=o.bounds.getBoundingClientRect();ie=e.left,oe=e.top}if(l.value){const{left:e,top:n,right:i,bottom:r}=l.value.getBoundingClientRect();X=e,Y=i,V=n,I=r}}function ze(e,n){const i=o.scale||1,r=o.resizeRatio||1,{lockAspectRatio:u,lockAspectRatioExtraHeight:f,lockAspectRatioExtraWidth:g}=o;let h=p.width,m=p.height;const d=f||0,w=g||0;return _("right",S.value)&&(h=p.width+(e-p.x)*r/i,u&&(m=(h-w)/R+d)),_("left",S.value)&&(h=p.width-(e-p.x)*r/i,u&&(m=(h-w)/R+d)),_("bottom",S.value)&&(m=p.height+(n-p.y)*r/i,u&&(h=(m-d)*R+w)),_("top",S.value)&&(m=p.height-(n-p.y)*r/i,u&&(h=(m-d)*R+w)),{newWidth:h,newHeight:m}}function xe(e,n){const{boundsByDirection:i}=o,r=i&&_("left",S.value),u=i&&_("top",S.value);let f,g;if(o.bounds==="parent"){const h=b.value;h&&(f=r?Y-ee:h.offsetWidth+(ee-X),g=u?I-te:h.offsetHeight+(te-V))}else o.bounds==="window"?a.value&&(f=r?Y:a.value.innerWidth-X,g=u?I:a.value.innerHeight-V):o.bounds&&(f=r?Y-ie:o.bounds.offsetWidth+(ie-X),g=u?I-oe:o.bounds.offsetHeight+(oe-V));return f&&Number.isFinite(f)&&(e=e&&e<f?e:f),g&&Number.isFinite(g)&&(n=n&&n<g?n:g),{maxWidth:e,maxHeight:n}}function We(e,n,i,r){var O,W;const{lockAspectRatio:u,lockAspectRatioExtraHeight:f,lockAspectRatioExtraWidth:g}=o,h=(O=r.width)!=null?O:10,m=i.width===void 0||i.width<0?e:i.width,d=(W=r.height)!=null?W:10,w=i.height===void 0||i.height<0?n:i.height,C=f||0,H=g||0;if(u){const N=(d-C)*R+H,M=(w-C)*R+H,L=(h-H)/R+C,U=(m-H)/R+C,q=Math.max(h,N),z=Math.min(m,M),Z=Math.max(d,L),A=Math.min(w,U);e=F(e,q,z),n=F(n,Z,A)}else e=F(e,h,m),n=F(n,d,w);return{newWidth:e,newHeight:n}}function ce(e,n,i){const r=$.value[i];return n.value==="auto"&&p[i]===e&&(r===void 0||r==="auto")?"auto":e}function Se(e,n){if(!a.value)return;let i=0,r=0;if(de(e)?(i=e.clientX,r=e.clientY):G(e)&&(i=e.touches[0].clientX,r=e.touches[0].clientY),v("resize:start",{event:e,direction:n,el:l.value})===!1)return;o.size&&(o.size.height!==void 0&&o.size.height!==x.value&&(x.value=o.size.height),o.size.width!==void 0&&o.size.width!==y.value&&(y.value=o.size.width)),R=typeof o.lockAspectRatio=="number"?o.lockAspectRatio:B.value.width/B.value.height;let u;const f=a.value.getComputedStyle(l.value);if(f.flexBasis!=="auto"){const g=b.value;g&&(Q=a.value.getComputedStyle(g).flexDirection.startsWith("row")?"row":"column",u=f.flexBasis)}ye(),Re(),p.x=i,p.y=r,p.width=B.value.width,p.height=B.value.height,k.value=!0,K.cursor=a.value.getComputedStyle(e.target).cursor||"auto",S.value=n,T.value=u}function D(e){var i,r;if(!k.value||!l.value)return;const n={width:B.value.width-p.width,height:B.value.height-p.height};v("resize:stop",{event:e,direction:S.value,el:l.value,delta:n}),o.size&&(((i=o.size)==null?void 0:i.width)!==void 0&&(y.value=o.size.width),((r=o.size)==null?void 0:r.height)!==void 0&&(y.value=o.size.height)),he(),k.value=!1,K.cursor="auto"}function j(e){var U,q;if(!k.value||!a.value)return;if(a.value.TouchEvent&&G(e))try{e.preventDefault(),e.stopPropagation()}catch{}let{maxWidth:n,maxHeight:i,minWidth:r,minHeight:u}=o;const f=G(e)?e.touches[0].clientX:e.clientX,g=G(e)?e.touches[0].clientY:e.clientY,h=re(),m=fe(h,a.value.innerWidth,a.value.innerHeight,n,i,r,u);n=m.maxWidth,i=m.maxHeight,r=m.minWidth,u=m.minHeight;let{newHeight:d,newWidth:w}=ze(f,g);const C=xe(n,i);(U=o.snap)!=null&&U.x&&(w=le(w,o.snap.x,o.snapGap)),(q=o.snap)!=null&&q.y&&(d=le(d,o.snap.y,o.snapGap));const H=We(w,d,{width:C.maxWidth,height:C.maxHeight},{width:r,height:u});if(w=H.newWidth,d=H.newHeight,o.grid){const z=se(w,o.grid[0]),Z=se(d,o.grid[1]),A=o.snapGap||0;w=A===0||Math.abs(z-w)<=A?z:w,d=A===0||Math.abs(Z-d)<=A?Z:d}const O={width:w-p.width,height:d-p.height};let W=w;const N=y.value;N&&typeof N=="string"&&(N.endsWith("%")?W=`${W/h.width*100}%`:N.endsWith("vw")?W=`${W/a.value.innerWidth*100}vw`:N.endsWith("vh")&&(W=`${W/a.value.innerHeight*100}vh`));let M=d;const L=x.value;L&&typeof L=="string"&&(L.endsWith("%")?M=`${M/h.height*100}%`:L.endsWith("vw")?M=`${M/a.value.innerWidth*100}vw`:L.endsWith("vh")&&(M=`${M/a.value.innerHeight*100}vh`)),y.value=ce(W,y,"width"),x.value=ce(M,x,"height"),Q==="row"?T.value=y.value:Q==="column"&&(T.value=x.value),v("resize",{event:e,direction:S.value,el:l.value,delta:O})}function Re(){a.value&&(a.value.addEventListener("mouseup",D),a.value.addEventListener("mousemove",j),a.value.addEventListener("mouseleave",D),a.value.addEventListener("touchmove",j,{capture:!0,passive:!1}),a.value.addEventListener("touchend",D))}function he(){a.value&&(a.value.removeEventListener("mouseup",D),a.value.removeEventListener("mousemove",j),a.value.removeEventListener("mouseleave",D),a.value.removeEventListener("touchmove",j,!0),a.value.removeEventListener("touchend",D))}return(e,n)=>(s.openBlock(),s.createElementBlock("div",{ref_key:"resizable",ref:l,style:s.normalizeStyle({position:"relative",userSelect:k.value?"none":"auto",...s.unref(be),maxWidth:t.maxWidth,maxHeight:t.maxHeight,minWidth:t.minWidth,minHeight:t.minHeight,boxSizing:"border-box",flexShrink:0,flexBasis:T.value})},[k.value?(s.openBlock(),s.createElementBlock("div",{key:0,style:s.normalizeStyle(K)},null,4)):s.createCommentVNode("",!0),s.renderSlot(e.$slots,"default"),t.enable?(s.openBlock(!0),s.createElementBlock(s.Fragment,{key:1},s.renderList(Object.entries(t.enable).filter(([i,r])=>r),([i])=>{var r,u;return s.openBlock(),s.createBlock(pe,{key:i,direction:i,"onResize:start":f=>Se(f,i),style:s.normalizeStyle((r=t.resizerStyles)==null?void 0:r[i]),class:s.normalizeClass((u=t.resizerClasses)==null?void 0:u[i])},{default:s.withCtx(()=>[s.renderSlot(e.$slots,`resizer-${i}`)]),_:2},1032,["direction","onResize:start","style","class"])}),128)):s.createCommentVNode("",!0)],4))}});E.Resizable=ge,Object.defineProperties(E,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

16

dist/Resizable.vue.d.ts

@@ -0,1 +1,2 @@

import { Ref } from "vue";
import { Direction, Enable, ResizerClasses, ResizerStyles, Size, NumberSize } from "./types";

@@ -161,3 +162,6 @@ declare const _default: {

}) => any) | undefined;
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
}, {
width: Ref<string | number>;
height: Ref<string | number>;
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
"resize:start": (value: {

@@ -270,3 +274,6 @@ event: MouseEvent | TouchEvent;

}) => any) | undefined;
} & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties;
} & import("vue").ShallowUnwrapRef<{
width: Ref<string | number>;
height: Ref<string | number>;
}> & {} & import("vue").ComponentCustomProperties;
__isFragment?: undefined;

@@ -334,3 +341,6 @@ __isTeleport?: undefined;

}) => any) | undefined;
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
}, {
width: Ref<string | number>;
height: Ref<string | number>;
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
"resize:start": (value: {

@@ -337,0 +347,0 @@ event: MouseEvent | TouchEvent;

2

package.json
{
"name": "vue-re-resizable",
"version": "6.9.19-beta.2",
"version": "6.9.19-beta.4",
"description": "Resizable component for React.",

@@ -5,0 +5,0 @@ "title": "vue-re-resizable",

dist/main.mjs

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc