@takuma-ru/vue-swipe-modal - npm Package Compare versions

Comparing version 4.0.1 to 4.0.2

dist/swipe-modal.cjs.js

@@ -1,1 +0,1 @@
-(function(){ try {var elementStyle = document.createElement('style'); elementStyle.appendChild(document.createTextNode(".swipe-modal-takumaru-vue-swipe-modal{position:fixed;scrollbar-width:none;z-index:15}.swipe-modal-takumaru-vue-swipe-modal .modal-background{position:fixed;z-index:11;width:100vw;height:100vh;top:50%;left:50%;transform:translate(-50%,-50%)}.swipe-modal-takumaru-vue-swipe-modal .modal-contents{position:fixed;z-index:12;max-height:100vh;left:50%;transform:translate(-50%) translateY(0);overflow-y:scroll;-ms-overflow-style:none;scrollbar-width:none;backface-visibility:hidden;-webkit-backface-visibility:hidden;filter:drop-shadow(0px 16px 40px rgba(0,37,80,.2))}.swipe-modal-takumaru-vue-swipe-modal .modal-contents::-webkit-scrollbar{width:0px}.swipe-modal-takumaru-vue-swipe-modal .modal-contents-chip-wrapper{z-index:12;display:flex;justify-items:center;align-items:center;justify-content:center;align-content:center;position:relative;top:0px;height:4px;width:100%;padding-top:8px;padding-bottom:8px;cursor:s-resize}.swipe-modal-takumaru-vue-swipe-modal .modal-contents-chip{--tip-color: #c8c8c8;width:40px;height:100%;border-radius:4px;background-color:var(--tip-color)}")); document.head.appendChild(elementStyle);} catch(e) {console.error('vite-plugin-css-injected-by-js', e);} })();"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});var o=require("vue-demi"),B;const Y=typeof window!="undefined",L=e=>typeof e=="function",V=e=>typeof e=="number",G=(e,a,n)=>Math.min(n,Math.max(a,e)),H=()=>{};Y&&((B=window==null?void 0:window.navigator)==null?void 0:B.userAgent)&&/iP(ad|hone|od)/.test(window.navigator.userAgent);function q(e){return e}function A(e){return o.getCurrentScope()?(o.onScopeDispose(e),!0):!1}function j(e,a,n={}){const{immediate:c=!0}=n,i=o.ref(!1);let u=null;function d(){u&&(clearTimeout(u),u=null)}function r(){i.value=!1,d()}function f(...m){d(),i.value=!0,u=setTimeout(()=>{i.value=!1,u=null,e(...m)},o.unref(a))}return c&&(i.value=!0,Y&&f()),A(r),{isPending:i,start:f,stop:r}}function z(e){var a;const n=o.unref(e);return(a=n==null?void 0:n.$el)!=null?a:n}const X=Y?window:void 0,_=typeof globalThis!="undefined"?globalThis:typeof window!="undefined"?window:typeof global!="undefined"?global:typeof self!="undefined"?self:{},x="__vueuse_ssr_handlers__";_[x]=_[x]||{};_[x];function K(e,a,{window:n=X,initialValue:c=""}={}){const i=o.ref(c),u=o.computed(()=>{var d;return z(a)||((d=n==null?void 0:n.document)==null?void 0:d.documentElement)});return o.watch([u,()=>o.unref(e)],([d,r])=>{var f;if(d&&n){const m=(f=n.getComputedStyle(d).getPropertyValue(r))==null?void 0:f.trim();i.value=m||c}},{immediate:!0}),o.watch(i,d=>{var r;(r=u.value)!=null&&r.style&&u.value.style.setProperty(o.unref(e),d)}),i}function J(e,a={}){const{immediate:n=!0,window:c=X}=a,i=o.ref(!1);let u=null;function d(){!i.value||!c||(e(),u=c.requestAnimationFrame(d))}function r(){!i.value&&c&&(i.value=!0,d())}function f(){i.value=!1,u!=null&&c&&(c.cancelAnimationFrame(u),u=null)}return n&&r(),A(f),{isActive:i,pause:f,resume:r}}var N;(function(e){e.UP="UP",e.RIGHT="RIGHT",e.DOWN="DOWN",e.LEFT="LEFT",e.NONE="NONE"})(N||(N={}));function Q([e,a,n,c]){const i=(s,l)=>1-3*l+3*s,u=(s,l)=>3*l-6*s,d=s=>3*s,r=(s,l,t)=>((i(l,t)*s+u(l,t))*s+d(l))*s,f=(s,l,t)=>3*i(l,t)*s*s+2*u(l,t)*s+d(l),m=s=>{let l=s;for(let t=0;t<4;++t){const p=f(l,e,n);if(p===0)return l;l-=(r(l,e,n)-s)/p}return l};return s=>e===a&&n===c?s:r(m(s),a,c)}function F(e,a={}){const{delay:n=0,disabled:c=!1,duration:i=1e3,onFinished:u=H,onStarted:d=H,transition:r=q}=a,f=o.computed(()=>{const v=o.unref(r);return L(v)?v:Q(v)}),m=o.computed(()=>{const v=o.unref(e);return V(v)?v:v.map(o.unref)}),s=o.computed(()=>V(m.value)?[m.value]:m.value),l=o.ref(s.value.slice(0));let t,p,w,S,k;const{resume:M,pause:P}=J(()=>{const v=Date.now(),b=G(1-(w-v)/t,0,1);l.value=k.map((T,D)=>{var h;return T+((h=p[D])!=null?h:0)*f.value(b)}),b>=1&&(P(),u())},{immediate:!1}),R=()=>{P(),t=o.unref(i),p=l.value.map((v,b)=>{var T,D;return((T=s.value[b])!=null?T:0)-((D=l.value[b])!=null?D:0)}),k=l.value.slice(0),S=Date.now(),w=S+t,M(),d()},C=j(R,n,{immediate:!1});return o.watch(s,()=>{o.unref(c)?l.value=s.value.slice(0):o.unref(n)<=0?R():C.start()},{deep:!0}),o.computed(()=>{const v=o.unref(c)?s:l;return V(m.value)?v.value[0]:v.value})}const Z=()=>{const e=o.ref({isTouch:!1,touchStart:0,touchDistance:0,touchX:0,touchY:0});return{touchPosition:e,initTouchPosition:()=>{e.value={isTouch:!1,touchStart:0,touchDistance:0,touchX:0,touchY:0}},touchStart:u=>{e.value.isTouch=!0,e.value.touchStart=u.touches[0].pageY},touchMove:u=>{e.value.isTouch&&(e.value.touchY=u.touches[0].pageY,e.value.touchDistance=e.value.touchStart-e.value.touchY,e.value.touchDistance>0&&(e.value.touchDistance=0))},touchEnd:()=>{e.value.isTouch=!1}}};function ee(){const e=o.ref({isMouseDown:!1,downStart:0,mouseDistance:0,mouseX:0,mouseY:0});return{mousePosition:e,initMousePosition:()=>{e.value={isMouseDown:!1,downStart:0,mouseDistance:0,mouseX:0,mouseY:0}},mouseDown:u=>{e.value.isMouseDown=!0,e.value.downStart=u.pageY},mouseMove:u=>{e.value.isMouseDown&&(e.value.mouseY=u.pageY,e.value.mouseDistance=e.value.downStart-e.value.mouseY,e.value.mouseDistance>0&&(e.value.mouseDistance=0))},mouseUp:()=>{e.value.isMouseDown=!1}}}const E=e=>{if(e.indexOf("px")>0)return Number(e.slice(0,e.indexOf("px")));if(e.indexOf("vh")>0){const a=Number(e.slice(0,e.indexOf("vh")));return window.innerHeight*(a/100)}else if(e.indexOf("vw")>0){const a=Number(e.slice(0,e.indexOf("vw")));return window.innerWidth*(a/100)}else return 0};o.install();var $=o.defineComponent({name:"swipeModal",model:{prop:"modelValue",event:"update:modelValue"},props:{modelValue:{type:Boolean,default:!1},dark:{type:Boolean,default:!1},persistent:{type:Boolean,default:!1},backgroundColor:{type:String,default:"#80808080"},fullscreen:{type:Boolean,default:!1},noTip:{type:Boolean,default:!1},contentsWidth:{type:String,default:"100%"},contentsHeight:{type:String,default:"30vh"},borderTopRadius:{type:String,default:null},borderTopLeftRadius:{type:String,default:"0px"},borderTopRightRadius:{type:String,default:"0px"},contentsColor:{type:String,default:"white"},tipColor:{type:String,default:"#c8c8c8"},darkContentsColor:{type:String,default:"#1E1E1E"}},emits:["update:modelValue","open","close"],setup(e,a){const{mousePosition:n,initMousePosition:c,mouseDown:i,mouseMove:u,mouseUp:d}=ee(),{touchPosition:r,initTouchPosition:f,touchStart:m,touchMove:s,touchEnd:l}=Z(),t=o.toRefs(e),p=o.computed({get:()=>t.modelValue.value,set:g=>a.emit("update:modelValue",g)}),w=o.ref(250),S=o.ref(null),k=K("--tip-color",S);k.value=t.tipColor.value;const M=o.ref([parseInt(t.backgroundColor.value.slice(1,3),16),parseInt(t.backgroundColor.value.slice(3,5),16),parseInt(t.backgroundColor.value.slice(5,7),16),0]),P=F(M,{duration:250,transition:[.25,.8,.25,1]}),R=o.computed(()=>{const[g,y,U,W]=P.value;return`rgba(${g}, ${y}, ${U}, ${W})`}),C=o.ref(-1*E(t.contentsHeight.value)),v=F(C,{duration:w.value,transition:[.25,.8,.25,1]}),b=o.computed(()=>v.value+(Math.abs(r.value.touchDistance)>Math.abs(n.value.mouseDistance)?r.value.touchDistance:n.value.mouseDistance)),T=()=>{document.documentElement.style.overflowY="auto",p.value=!1},D=()=>{a.emit("open"),document.documentElement.style.overflowY="hidden",C.value=0,M.value=[parseInt(t.backgroundColor.value.slice(1,3),16),parseInt(t.backgroundColor.value.slice(3,5),16),parseInt(t.backgroundColor.value.slice(5,7),16),parseInt(t.backgroundColor.value.slice(7,9),16)/255]},h=()=>{C.value=-1*E(t.contentsHeight.value)-(Math.abs(r.value.touchDistance)>Math.abs(n.value.mouseDistance)?r.value.touchDistance:n.value.mouseDistance),M.value=[parseInt(t.backgroundColor.value.slice(1,3),16),parseInt(t.backgroundColor.value.slice(3,5),16),parseInt(t.backgroundColor.value.slice(5,7),16),0],setTimeout(()=>{c(),f(),T(),a.emit("close")},w.value)},I=()=>{l(),-1*r.value.touchDistance>E(t.contentsHeight.value)/8?h():r.value.touchDistance=0},O=()=>{d(),-1*n.value.mouseDistance>E(t.contentsHeight.value)/8?h():n.value.mouseDistance=0};return o.watch(p,(g,y)=>{p.value&&D()}),()=>{var g,y;return o.h("div",{class:"swipe-modal-takumaru-vue-swipe-modal",on:{mousemove:u,mouseup:O},onMousemove:u,onMouseup:O},[t.modelValue.value?o.h("div",{class:"modal-background",style:{backgroundColor:R.value},on:{onMouseup:()=>t.persistent.value?()=>null:h(),click:()=>t.persistent.value?()=>null:h()},onMouseup:()=>{t.persistent.value||h()},onClick:()=>{t.persistent.value||h()}}):null,t.modelValue.value?o.h("div",{class:"modal-contents",style:{width:t.contentsWidth.value,minHeight:t.contentsHeight.value,borderTopLeftRadius:t.borderTopRadius.value?t.borderTopRadius.value:t.borderTopLeftRadius.value,borderTopRightRadius:t.borderTopRadius?t.borderTopRadius.value:t.borderTopRightRadius.value,backgroundColor:t.dark.value?t.darkContentsColor.value:t.contentsColor.value,color:t.dark.value?"white":"black",bottom:`${b.value}px`},on:{touchstart:m,touchmove:s,touchend:I},onTouchstart:m,onTouchmove:s,onTouchend:I},[t.noTip.value?null:o.h("div",{class:"modal-contents-chip-wrapper",on:{mousedown:i},onMousedown:i},[o.h("div",{class:"modal-contents-chip"})]),(y=(g=a.slots).default)==null?void 0:y.call(g)]):null])}}});exports.default=$;exports.swipeModal=$;
+(function(){ try {var elementStyle = document.createElement('style'); elementStyle.appendChild(document.createTextNode(".swipe-modal-takumaru-vue-swipe-modal{position:fixed;scrollbar-width:none;z-index:15}.swipe-modal-takumaru-vue-swipe-modal .modal-background{position:fixed;z-index:11;width:100vw;height:100vh;top:50%;left:50%;transform:translate(-50%,-50%)}.swipe-modal-takumaru-vue-swipe-modal .modal-contents{position:fixed;z-index:12;max-height:100vh;left:50%;transform:translate(-50%) translateY(0);overflow-y:scroll;-ms-overflow-style:none;scrollbar-width:none;backface-visibility:hidden;-webkit-backface-visibility:hidden;filter:drop-shadow(0px 16px 40px rgba(0,37,80,.2))}.swipe-modal-takumaru-vue-swipe-modal .modal-contents::-webkit-scrollbar{width:0px}.swipe-modal-takumaru-vue-swipe-modal .modal-contents-chip-wrapper{z-index:12;display:flex;justify-items:center;align-items:center;justify-content:center;align-content:center;position:relative;top:0px;height:4px;width:100%;padding-top:8px;padding-bottom:8px;cursor:s-resize}.swipe-modal-takumaru-vue-swipe-modal .modal-contents-chip{--tip-color: #c8c8c8;width:40px;height:100%;border-radius:4px;background-color:var(--tip-color)}")); document.head.appendChild(elementStyle);} catch(e) {console.error('vite-plugin-css-injected-by-js', e);} })();"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});var o=require("vue-demi"),N;const O=typeof window!="undefined",L=e=>typeof e=="function",x=e=>typeof e=="number",G=(e,r,n)=>Math.min(n,Math.max(r,e)),B=()=>{};O&&((N=window==null?void 0:window.navigator)==null?void 0:N.userAgent)&&/iP(ad|hone|od)/.test(window.navigator.userAgent);function q(e){return e}function A(e){return o.getCurrentScope()?(o.onScopeDispose(e),!0):!1}function j(e,r,n={}){const{immediate:a=!0}=n,s=o.ref(!1);let u=null;function d(){u&&(clearTimeout(u),u=null)}function c(){s.value=!1,d()}function f(...m){d(),s.value=!0,u=setTimeout(()=>{s.value=!1,u=null,e(...m)},o.unref(r))}return a&&(s.value=!0,O&&f()),A(c),{isPending:s,start:f,stop:c}}function z(e){var r;const n=o.unref(e);return(r=n==null?void 0:n.$el)!=null?r:n}const X=O?window:void 0,V=typeof globalThis!="undefined"?globalThis:typeof window!="undefined"?window:typeof global!="undefined"?global:typeof self!="undefined"?self:{},_="__vueuse_ssr_handlers__";V[_]=V[_]||{};V[_];function K(e,r,{window:n=X,initialValue:a=""}={}){const s=o.ref(a),u=o.computed(()=>{var d;return z(r)||((d=n==null?void 0:n.document)==null?void 0:d.documentElement)});return o.watch([u,()=>o.unref(e)],([d,c])=>{var f;if(d&&n){const m=(f=n.getComputedStyle(d).getPropertyValue(c))==null?void 0:f.trim();s.value=m||a}},{immediate:!0}),o.watch(s,d=>{var c;(c=u.value)!=null&&c.style&&u.value.style.setProperty(o.unref(e),d)}),s}function J(e,r={}){const{immediate:n=!0,window:a=X}=r,s=o.ref(!1);let u=null;function d(){!s.value||!a||(e(),u=a.requestAnimationFrame(d))}function c(){!s.value&&a&&(s.value=!0,d())}function f(){s.value=!1,u!=null&&a&&(a.cancelAnimationFrame(u),u=null)}return n&&c(),A(f),{isActive:s,pause:f,resume:c}}var H;(function(e){e.UP="UP",e.RIGHT="RIGHT",e.DOWN="DOWN",e.LEFT="LEFT",e.NONE="NONE"})(H||(H={}));function Q([e,r,n,a]){const s=(l,i)=>1-3*i+3*l,u=(l,i)=>3*i-6*l,d=l=>3*l,c=(l,i,t)=>((s(i,t)*l+u(i,t))*l+d(i))*l,f=(l,i,t)=>3*s(i,t)*l*l+2*u(i,t)*l+d(i),m=l=>{let i=l;for(let t=0;t<4;++t){const p=f(i,e,n);if(p===0)return i;i-=(c(i,e,n)-l)/p}return i};return l=>e===r&&n===a?l:c(m(l),r,a)}function F(e,r={}){const{delay:n=0,disabled:a=!1,duration:s=1e3,onFinished:u=B,onStarted:d=B,transition:c=q}=r,f=o.computed(()=>{const v=o.unref(c);return L(v)?v:Q(v)}),m=o.computed(()=>{const v=o.unref(e);return x(v)?v:v.map(o.unref)}),l=o.computed(()=>x(m.value)?[m.value]:m.value),i=o.ref(l.value.slice(0));let t,p,w,y,S;const{resume:C,pause:E}=J(()=>{const v=Date.now(),b=G(1-(w-v)/t,0,1);i.value=S.map((D,M)=>{var h;return D+((h=p[M])!=null?h:0)*f.value(b)}),b>=1&&(E(),u())},{immediate:!1}),P=()=>{E(),t=o.unref(s),p=i.value.map((v,b)=>{var D,M;return((D=l.value[b])!=null?D:0)-((M=i.value[b])!=null?M:0)}),S=i.value.slice(0),y=Date.now(),w=y+t,C(),d()},T=j(P,n,{immediate:!1});return o.watch(l,()=>{o.unref(a)?i.value=l.value.slice(0):o.unref(n)<=0?P():T.start()},{deep:!0}),o.computed(()=>{const v=o.unref(a)?l:i;return x(m.value)?v.value[0]:v.value})}const Z=()=>{const e=o.ref({isTouch:!1,touchStart:0,touchDistance:0,touchX:0,touchY:0});return{touchPosition:e,initTouchPosition:()=>{e.value={isTouch:!1,touchStart:0,touchDistance:0,touchX:0,touchY:0}},touchStart:u=>{e.value.isTouch=!0,e.value.touchStart=u.touches[0].pageY},touchMove:u=>{e.value.isTouch&&(e.value.touchY=u.touches[0].pageY,e.value.touchDistance=e.value.touchStart-e.value.touchY,e.value.touchDistance>0&&(e.value.touchDistance=0))},touchEnd:()=>{e.value.isTouch=!1}}};function ee(){const e=o.ref({isMouseDown:!1,downStart:0,mouseDistance:0,mouseX:0,mouseY:0});return{mousePosition:e,initMousePosition:()=>{e.value={isMouseDown:!1,downStart:0,mouseDistance:0,mouseX:0,mouseY:0}},mouseDown:u=>{e.value.isMouseDown=!0,e.value.downStart=u.pageY},mouseMove:u=>{e.value.isMouseDown&&(e.value.mouseY=u.pageY,e.value.mouseDistance=e.value.downStart-e.value.mouseY,e.value.mouseDistance>0&&(e.value.mouseDistance=0))},mouseUp:()=>{e.value.isMouseDown=!1}}}const R=e=>{var r,n;if(e.indexOf("px")>0)return Number(e.slice(0,e.indexOf("px")));if(e.indexOf("vh")>0){const a=Number(e.slice(0,e.indexOf("vh")));return window.innerHeight*(a/100)}else if(e.indexOf("vw")>0){const a=Number(e.slice(0,e.indexOf("vw")));return window.innerWidth*(a/100)}else if(e.indexOf("%")>0){const a=Number(e.slice(0,e.indexOf("%"))),s=Array.from(document.getElementsByClassName("swipe-modal-takumaru-vue-swipe-modal")),u=((n=(r=s[0].parentNode)==null?void 0:r.parentElement)==null?void 0:n.clientHeight)*(a/100);return console.log(s[0],u),u}else return 0};o.install();var $=o.defineComponent({name:"swipeModal",model:{prop:"modelValue",event:"update:modelValue"},props:{modelValue:{type:Boolean,default:!1},dark:{type:Boolean,default:!1},persistent:{type:Boolean,default:!1},backgroundColor:{type:String,default:"#80808080"},fullscreen:{type:Boolean,default:!1},noTip:{type:Boolean,default:!1},contentsWidth:{type:String,default:"100%"},contentsHeight:{type:String,default:"30vh"},borderTopRadius:{type:String,default:null},borderTopLeftRadius:{type:String,default:"0px"},borderTopRightRadius:{type:String,default:"0px"},contentsColor:{type:String,default:"white"},tipColor:{type:String,default:"#c8c8c8"},darkContentsColor:{type:String,default:"#1E1E1E"}},emits:["update:modelValue","open","close"],setup(e,r){const{mousePosition:n,initMousePosition:a,mouseDown:s,mouseMove:u,mouseUp:d}=ee(),{touchPosition:c,initTouchPosition:f,touchStart:m,touchMove:l,touchEnd:i}=Z(),t=o.toRefs(e),p=o.computed({get:()=>t.modelValue.value,set:g=>r.emit("update:modelValue",g)}),w=o.ref(250),y=o.ref(null),S=K("--tip-color",y);S.value=t.tipColor.value;const C=o.ref([parseInt(t.backgroundColor.value.slice(1,3),16),parseInt(t.backgroundColor.value.slice(3,5),16),parseInt(t.backgroundColor.value.slice(5,7),16),0]),E=F(C,{duration:250,transition:[.25,.8,.25,1]}),P=o.computed(()=>{const[g,k,U,W]=E.value;return`rgba(${g}, ${k}, ${U}, ${W})`}),T=o.ref(0),v=F(T,{duration:w.value,transition:[.25,.8,.25,1]}),b=o.computed(()=>v.value+(Math.abs(c.value.touchDistance)>Math.abs(n.value.mouseDistance)?c.value.touchDistance:n.value.mouseDistance)),D=()=>{document.documentElement.style.overflowY="auto",p.value=!1},M=()=>{r.emit("open"),document.documentElement.style.overflowY="hidden",T.value=0,C.value=[parseInt(t.backgroundColor.value.slice(1,3),16),parseInt(t.backgroundColor.value.slice(3,5),16),parseInt(t.backgroundColor.value.slice(5,7),16),parseInt(t.backgroundColor.value.slice(7,9),16)/255]},h=()=>{T.value=-1*R(t.contentsHeight.value)-(Math.abs(c.value.touchDistance)>Math.abs(n.value.mouseDistance)?c.value.touchDistance:n.value.mouseDistance),C.value=[parseInt(t.backgroundColor.value.slice(1,3),16),parseInt(t.backgroundColor.value.slice(3,5),16),parseInt(t.backgroundColor.value.slice(5,7),16),0],setTimeout(()=>{a(),f(),D(),r.emit("close")},w.value)},Y=()=>{i(),-1*c.value.touchDistance>R(t.contentsHeight.value)/8?h():c.value.touchDistance=0},I=()=>{d(),-1*n.value.mouseDistance>R(t.contentsHeight.value)/8?h():n.value.mouseDistance=0};return o.watch(p,(g,k)=>{p.value&&M()}),o.onMounted(()=>{T.value=-1*R(t.contentsHeight.value)}),()=>{var g,k;return o.h("div",{class:"swipe-modal-takumaru-vue-swipe-modal",on:{mousemove:u,mouseup:I},onMousemove:u,onMouseup:I},[t.modelValue.value?o.h("div",{class:"modal-background",style:{backgroundColor:P.value},on:{onMouseup:()=>t.persistent.value?()=>null:h(),click:()=>t.persistent.value?()=>null:h()},onMouseup:()=>{t.persistent.value||h()},onClick:()=>{t.persistent.value||h()}}):null,t.modelValue.value?o.h("div",{class:"modal-contents",style:{width:t.contentsWidth.value,minHeight:t.contentsHeight.value,borderTopLeftRadius:t.borderTopRadius.value?t.borderTopRadius.value:t.borderTopLeftRadius.value,borderTopRightRadius:t.borderTopRadius?t.borderTopRadius.value:t.borderTopRightRadius.value,backgroundColor:t.dark.value?t.darkContentsColor.value:t.contentsColor.value,color:t.dark.value?"white":"black",bottom:`${b.value}px`},on:{touchstart:m,touchmove:l,touchend:Y},onTouchstart:m,onTouchmove:l,onTouchend:Y},[t.noTip.value?null:o.h("div",{class:"modal-contents-chip-wrapper",on:{mousedown:s},onMousedown:s},[o.h("div",{class:"modal-contents-chip"})]),(k=(g=r.slots).default)==null?void 0:k.call(g)]):null])}}});exports.default=$;exports.swipeModal=$;

dist/swipe-modal.es.js

@@ -1,2 +0,2 @@
-(function(){ try {var elementStyle = document.createElement('style'); elementStyle.appendChild(document.createTextNode(".swipe-modal-takumaru-vue-swipe-modal{position:fixed;scrollbar-width:none;z-index:15}.swipe-modal-takumaru-vue-swipe-modal .modal-background{position:fixed;z-index:11;width:100vw;height:100vh;top:50%;left:50%;transform:translate(-50%,-50%)}.swipe-modal-takumaru-vue-swipe-modal .modal-contents{position:fixed;z-index:12;max-height:100vh;left:50%;transform:translate(-50%) translateY(0);overflow-y:scroll;-ms-overflow-style:none;scrollbar-width:none;backface-visibility:hidden;-webkit-backface-visibility:hidden;filter:drop-shadow(0px 16px 40px rgba(0,37,80,.2))}.swipe-modal-takumaru-vue-swipe-modal .modal-contents::-webkit-scrollbar{width:0px}.swipe-modal-takumaru-vue-swipe-modal .modal-contents-chip-wrapper{z-index:12;display:flex;justify-items:center;align-items:center;justify-content:center;align-content:center;position:relative;top:0px;height:4px;width:100%;padding-top:8px;padding-bottom:8px;cursor:s-resize}.swipe-modal-takumaru-vue-swipe-modal .modal-contents-chip{--tip-color: #c8c8c8;width:40px;height:100%;border-radius:4px;background-color:var(--tip-color)}")); document.head.appendChild(elementStyle);} catch(e) {console.error('vite-plugin-css-injected-by-js', e);} })();import { ref, unref, getCurrentScope, onScopeDispose, computed, watch, install, defineComponent, toRefs, h } from "vue-demi";
+(function(){ try {var elementStyle = document.createElement('style'); elementStyle.appendChild(document.createTextNode(".swipe-modal-takumaru-vue-swipe-modal{position:fixed;scrollbar-width:none;z-index:15}.swipe-modal-takumaru-vue-swipe-modal .modal-background{position:fixed;z-index:11;width:100vw;height:100vh;top:50%;left:50%;transform:translate(-50%,-50%)}.swipe-modal-takumaru-vue-swipe-modal .modal-contents{position:fixed;z-index:12;max-height:100vh;left:50%;transform:translate(-50%) translateY(0);overflow-y:scroll;-ms-overflow-style:none;scrollbar-width:none;backface-visibility:hidden;-webkit-backface-visibility:hidden;filter:drop-shadow(0px 16px 40px rgba(0,37,80,.2))}.swipe-modal-takumaru-vue-swipe-modal .modal-contents::-webkit-scrollbar{width:0px}.swipe-modal-takumaru-vue-swipe-modal .modal-contents-chip-wrapper{z-index:12;display:flex;justify-items:center;align-items:center;justify-content:center;align-content:center;position:relative;top:0px;height:4px;width:100%;padding-top:8px;padding-bottom:8px;cursor:s-resize}.swipe-modal-takumaru-vue-swipe-modal .modal-contents-chip{--tip-color: #c8c8c8;width:40px;height:100%;border-radius:4px;background-color:var(--tip-color)}")); document.head.appendChild(elementStyle);} catch(e) {console.error('vite-plugin-css-injected-by-js', e);} })();import { ref, unref, getCurrentScope, onScopeDispose, computed, watch, install, defineComponent, toRefs, onMounted, h } from "vue-demi";
 var _a;
@@ -297,2 +297,3 @@ const isClient = typeof window !== "undefined";
 const toPixel = (payload) => {
+  var _a2, _b;
   if (payload.indexOf("px") > 0) {
@@ -309,2 +310,8 @@ const px = Number(payload.slice(0, payload.indexOf("px")));
     return px;
+  } else if (payload.indexOf("%") > 0) {
+    const pc = Number(payload.slice(0, payload.indexOf("%")));
+    const swipeModalEl = Array.from(document.getElementsByClassName("swipe-modal-takumaru-vue-swipe-modal"));
+    const px = ((_b = (_a2 = swipeModalEl[0].parentNode) == null ? void 0 : _a2.parentElement) == null ? void 0 : _b.clientHeight) * (pc / 100);
+    console.log(swipeModalEl[0], px);
+    return px;
   } else {
@@ -419,3 +426,3 @@ return 0;
     });
-    const contentsBottomPosition = ref(-1 * toPixel(propsRef.contentsHeight.value));
+    const contentsBottomPosition = ref(0);
     const contentsBottomPositionTransition = useTransition(contentsBottomPosition, {
@@ -480,2 +487,5 @@ duration: contentsBottomPositionTransitionDuration.value,
     });
+    onMounted(() => {
+      contentsBottomPosition.value = -1 * toPixel(propsRef.contentsHeight.value);
+    });
     return () => {
@@ -482,0 +492,0 @@ var _a2, _b;

dist/swipe-modal.umd.js

 (function(){ try {var elementStyle = document.createElement('style'); elementStyle.appendChild(document.createTextNode(".swipe-modal-takumaru-vue-swipe-modal{position:fixed;scrollbar-width:none;z-index:15}.swipe-modal-takumaru-vue-swipe-modal .modal-background{position:fixed;z-index:11;width:100vw;height:100vh;top:50%;left:50%;transform:translate(-50%,-50%)}.swipe-modal-takumaru-vue-swipe-modal .modal-contents{position:fixed;z-index:12;max-height:100vh;left:50%;transform:translate(-50%) translateY(0);overflow-y:scroll;-ms-overflow-style:none;scrollbar-width:none;backface-visibility:hidden;-webkit-backface-visibility:hidden;filter:drop-shadow(0px 16px 40px rgba(0,37,80,.2))}.swipe-modal-takumaru-vue-swipe-modal .modal-contents::-webkit-scrollbar{width:0px}.swipe-modal-takumaru-vue-swipe-modal .modal-contents-chip-wrapper{z-index:12;display:flex;justify-items:center;align-items:center;justify-content:center;align-content:center;position:relative;top:0px;height:4px;width:100%;padding-top:8px;padding-bottom:8px;cursor:s-resize}.swipe-modal-takumaru-vue-swipe-modal .modal-contents-chip{--tip-color: #c8c8c8;width:40px;height:100%;border-radius:4px;background-color:var(--tip-color)}")); document.head.appendChild(elementStyle);} catch(e) {console.error('vite-plugin-css-injected-by-js', e);} })();var __vite_style__=document.createElement("style");__vite_style__.innerHTML=`.swipe-modal-takumaru-vue-swipe-modal{position:fixed;scrollbar-width:none;z-index:15}.swipe-modal-takumaru-vue-swipe-modal .modal-background{position:fixed;z-index:11;width:100vw;height:100vh;top:50%;left:50%;transform:translate(-50%,-50%)}.swipe-modal-takumaru-vue-swipe-modal .modal-contents{position:fixed;z-index:12;max-height:100vh;left:50%;transform:translate(-50%) translateY(0);overflow-y:scroll;-ms-overflow-style:none;scrollbar-width:none;backface-visibility:hidden;-webkit-backface-visibility:hidden;filter:drop-shadow(0px 16px 40px rgba(0,37,80,.2))}.swipe-modal-takumaru-vue-swipe-modal .modal-contents::-webkit-scrollbar{width:0px}.swipe-modal-takumaru-vue-swipe-modal .modal-contents-chip-wrapper{z-index:12;display:flex;justify-items:center;align-items:center;justify-content:center;align-content:center;position:relative;top:0px;height:4px;width:100%;padding-top:8px;padding-bottom:8px;cursor:s-resize}.swipe-modal-takumaru-vue-swipe-modal .modal-contents-chip{--tip-color: #c8c8c8;width:40px;height:100%;border-radius:4px;background-color:var(--tip-color)}
-(function(w,o){typeof exports=="object"&&typeof module!="undefined"?o(exports,require("vue-demi")):typeof define=="function"&&define.amd?define(["exports","vue-demi"],o):(w=typeof globalThis!="undefined"?globalThis:w||self,o(w.swipeModal={},w.vueDemi))})(this,function(w,o){"use strict";`;document.head.appendChild(__vite_style__);var H;const V=typeof window!="undefined",U=e=>typeof e=="function",Y=e=>typeof e=="number",W=(e,a,n)=>Math.min(n,Math.max(a,e)),B=()=>{};V&&((H=window==null?void 0:window.navigator)==null?void 0:H.userAgent)&&/iP(ad|hone|od)/.test(window.navigator.userAgent);function j(e){return e}function N(e){return o.getCurrentScope()?(o.onScopeDispose(e),!0):!1}function G(e,a,n={}){const{immediate:c=!0}=n,i=o.ref(!1);let u=null;function d(){u&&(clearTimeout(u),u=null)}function r(){i.value=!1,d()}function p(...v){d(),i.value=!0,u=setTimeout(()=>{i.value=!1,u=null,e(...v)},o.unref(a))}return c&&(i.value=!0,V&&p()),N(r),{isPending:i,start:p,stop:r}}function q(e){var a;const n=o.unref(e);return(a=n==null?void 0:n.$el)!=null?a:n}const F=V?window:void 0,I=typeof globalThis!="undefined"?globalThis:typeof window!="undefined"?window:typeof global!="undefined"?global:typeof self!="undefined"?self:{},O="__vueuse_ssr_handlers__";I[O]=I[O]||{},I[O];function K(e,a,{window:n=F,initialValue:c=""}={}){const i=o.ref(c),u=o.computed(()=>{var d;return q(a)||((d=n==null?void 0:n.document)==null?void 0:d.documentElement)});return o.watch([u,()=>o.unref(e)],([d,r])=>{var p;if(d&&n){const v=(p=n.getComputedStyle(d).getPropertyValue(r))==null?void 0:p.trim();i.value=v||c}},{immediate:!0}),o.watch(i,d=>{var r;(r=u.value)!=null&&r.style&&u.value.style.setProperty(o.unref(e),d)}),i}function J(e,a={}){const{immediate:n=!0,window:c=F}=a,i=o.ref(!1);let u=null;function d(){!i.value||!c||(e(),u=c.requestAnimationFrame(d))}function r(){!i.value&&c&&(i.value=!0,d())}function p(){i.value=!1,u!=null&&c&&(c.cancelAnimationFrame(u),u=null)}return n&&r(),N(p),{isActive:i,pause:p,resume:r}}var A;(function(e){e.UP="UP",e.RIGHT="RIGHT",e.DOWN="DOWN",e.LEFT="LEFT",e.NONE="NONE"})(A||(A={}));function Q([e,a,n,c]){const i=(s,l)=>1-3*l+3*s,u=(s,l)=>3*l-6*s,d=s=>3*s,r=(s,l,t)=>((i(l,t)*s+u(l,t))*s+d(l))*s,p=(s,l,t)=>3*i(l,t)*s*s+2*u(l,t)*s+d(l),v=s=>{let l=s;for(let t=0;t<4;++t){const h=p(l,e,n);if(h===0)return l;l-=(r(l,e,n)-s)/h}return l};return s=>e===a&&n===c?s:r(v(s),a,c)}function X(e,a={}){const{delay:n=0,disabled:c=!1,duration:i=1e3,onFinished:u=B,onStarted:d=B,transition:r=j}=a,p=o.computed(()=>{const f=o.unref(r);return U(f)?f:Q(f)}),v=o.computed(()=>{const f=o.unref(e);return Y(f)?f:f.map(o.unref)}),s=o.computed(()=>Y(v.value)?[v.value]:v.value),l=o.ref(s.value.slice(0));let t,h,T,_,P;const{resume:M,pause:E}=J(()=>{const f=Date.now(),b=W(1-(T-f)/t,0,1);l.value=P.map((y,k)=>{var m;return y+((m=h[k])!=null?m:0)*p.value(b)}),b>=1&&(E(),u())},{immediate:!1}),R=()=>{E(),t=o.unref(i),h=l.value.map((f,b)=>{var y,k;return((y=s.value[b])!=null?y:0)-((k=l.value[b])!=null?k:0)}),P=l.value.slice(0),_=Date.now(),T=_+t,M(),d()},x=G(R,n,{immediate:!1});return o.watch(s,()=>{o.unref(c)?l.value=s.value.slice(0):o.unref(n)<=0?R():x.start()},{deep:!0}),o.computed(()=>{const f=o.unref(c)?s:l;return Y(v.value)?f.value[0]:f.value})}const Z=()=>{const e=o.ref({isTouch:!1,touchStart:0,touchDistance:0,touchX:0,touchY:0});return{touchPosition:e,initTouchPosition:()=>{e.value={isTouch:!1,touchStart:0,touchDistance:0,touchX:0,touchY:0}},touchStart:u=>{e.value.isTouch=!0,e.value.touchStart=u.touches[0].pageY},touchMove:u=>{e.value.isTouch&&(e.value.touchY=u.touches[0].pageY,e.value.touchDistance=e.value.touchStart-e.value.touchY,e.value.touchDistance>0&&(e.value.touchDistance=0))},touchEnd:()=>{e.value.isTouch=!1}}};function D(){const e=o.ref({isMouseDown:!1,downStart:0,mouseDistance:0,mouseX:0,mouseY:0});return{mousePosition:e,initMousePosition:()=>{e.value={isMouseDown:!1,downStart:0,mouseDistance:0,mouseX:0,mouseY:0}},mouseDown:u=>{e.value.isMouseDown=!0,e.value.downStart=u.pageY},mouseMove:u=>{e.value.isMouseDown&&(e.value.mouseY=u.pageY,e.value.mouseDistance=e.value.downStart-e.value.mouseY,e.value.mouseDistance>0&&(e.value.mouseDistance=0))},mouseUp:()=>{e.value.isMouseDown=!1}}}const S=e=>{if(e.indexOf("px")>0)return Number(e.slice(0,e.indexOf("px")));if(e.indexOf("vh")>0){const a=Number(e.slice(0,e.indexOf("vh")));return window.innerHeight*(a/100)}else if(e.indexOf("vw")>0){const a=Number(e.slice(0,e.indexOf("vw")));return window.innerWidth*(a/100)}else return 0};var oe="";o.install();var $=o.defineComponent({name:"swipeModal",model:{prop:"modelValue",event:"update:modelValue"},props:{modelValue:{type:Boolean,default:!1},dark:{type:Boolean,default:!1},persistent:{type:Boolean,default:!1},backgroundColor:{type:String,default:"#80808080"},fullscreen:{type:Boolean,default:!1},noTip:{type:Boolean,default:!1},contentsWidth:{type:String,default:"100%"},contentsHeight:{type:String,default:"30vh"},borderTopRadius:{type:String,default:null},borderTopLeftRadius:{type:String,default:"0px"},borderTopRightRadius:{type:String,default:"0px"},contentsColor:{type:String,default:"white"},tipColor:{type:String,default:"#c8c8c8"},darkContentsColor:{type:String,default:"#1E1E1E"}},emits:["update:modelValue","open","close"],setup(e,a){const{mousePosition:n,initMousePosition:c,mouseDown:i,mouseMove:u,mouseUp:d}=D(),{touchPosition:r,initTouchPosition:p,touchStart:v,touchMove:s,touchEnd:l}=Z(),t=o.toRefs(e),h=o.computed({get:()=>t.modelValue.value,set:g=>a.emit("update:modelValue",g)}),T=o.ref(250),_=o.ref(null),P=K("--tip-color",_);P.value=t.tipColor.value;const M=o.ref([parseInt(t.backgroundColor.value.slice(1,3),16),parseInt(t.backgroundColor.value.slice(3,5),16),parseInt(t.backgroundColor.value.slice(5,7),16),0]),E=X(M,{duration:250,transition:[.25,.8,.25,1]}),R=o.computed(()=>{const[g,C,ee,te]=E.value;return`rgba(${g}, ${C}, ${ee}, ${te})`}),x=o.ref(-1*S(t.contentsHeight.value)),f=X(x,{duration:T.value,transition:[.25,.8,.25,1]}),b=o.computed(()=>f.value+(Math.abs(r.value.touchDistance)>Math.abs(n.value.mouseDistance)?r.value.touchDistance:n.value.mouseDistance)),y=()=>{document.documentElement.style.overflowY="auto",h.value=!1},k=()=>{a.emit("open"),document.documentElement.style.overflowY="hidden",x.value=0,M.value=[parseInt(t.backgroundColor.value.slice(1,3),16),parseInt(t.backgroundColor.value.slice(3,5),16),parseInt(t.backgroundColor.value.slice(5,7),16),parseInt(t.backgroundColor.value.slice(7,9),16)/255]},m=()=>{x.value=-1*S(t.contentsHeight.value)-(Math.abs(r.value.touchDistance)>Math.abs(n.value.mouseDistance)?r.value.touchDistance:n.value.mouseDistance),M.value=[parseInt(t.backgroundColor.value.slice(1,3),16),parseInt(t.backgroundColor.value.slice(3,5),16),parseInt(t.backgroundColor.value.slice(5,7),16),0],setTimeout(()=>{c(),p(),y(),a.emit("close")},T.value)},z=()=>{l(),-1*r.value.touchDistance>S(t.contentsHeight.value)/8?m():r.value.touchDistance=0},L=()=>{d(),-1*n.value.mouseDistance>S(t.contentsHeight.value)/8?m():n.value.mouseDistance=0};return o.watch(h,(g,C)=>{h.value&&k()}),()=>{var g,C;return o.h("div",{class:"swipe-modal-takumaru-vue-swipe-modal",on:{mousemove:u,mouseup:L},onMousemove:u,onMouseup:L},[t.modelValue.value?o.h("div",{class:"modal-background",style:{backgroundColor:R.value},on:{onMouseup:()=>t.persistent.value?()=>null:m(),click:()=>t.persistent.value?()=>null:m()},onMouseup:()=>{t.persistent.value||m()},onClick:()=>{t.persistent.value||m()}}):null,t.modelValue.value?o.h("div",{class:"modal-contents",style:{width:t.contentsWidth.value,minHeight:t.contentsHeight.value,borderTopLeftRadius:t.borderTopRadius.value?t.borderTopRadius.value:t.borderTopLeftRadius.value,borderTopRightRadius:t.borderTopRadius?t.borderTopRadius.value:t.borderTopRightRadius.value,backgroundColor:t.dark.value?t.darkContentsColor.value:t.contentsColor.value,color:t.dark.value?"white":"black",bottom:`${b.value}px`},on:{touchstart:v,touchmove:s,touchend:z},onTouchstart:v,onTouchmove:s,onTouchend:z},[t.noTip.value?null:o.h("div",{class:"modal-contents-chip-wrapper",on:{mousedown:i},onMousedown:i},[o.h("div",{class:"modal-contents-chip"})]),(C=(g=a.slots).default)==null?void 0:C.call(g)]):null])}}});w.default=$,w.swipeModal=$,Object.defineProperties(w,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(w,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("vue-demi")):typeof define=="function"&&define.amd?define(["exports","vue-demi"],t):(w=typeof globalThis!="undefined"?globalThis:w||self,t(w.swipeModal={},w.vueDemi))})(this,function(w,t){"use strict";`;document.head.appendChild(__vite_style__);var N;const V=typeof window!="undefined",U=e=>typeof e=="function",Y=e=>typeof e=="number",W=(e,r,n)=>Math.min(n,Math.max(r,e)),H=()=>{};V&&((N=window==null?void 0:window.navigator)==null?void 0:N.userAgent)&&/iP(ad|hone|od)/.test(window.navigator.userAgent);function j(e){return e}function B(e){return t.getCurrentScope()?(t.onScopeDispose(e),!0):!1}function G(e,r,n={}){const{immediate:l=!0}=n,u=t.ref(!1);let s=null;function d(){s&&(clearTimeout(s),s=null)}function c(){u.value=!1,d()}function p(...v){d(),u.value=!0,s=setTimeout(()=>{u.value=!1,s=null,e(...v)},t.unref(r))}return l&&(u.value=!0,V&&p()),B(c),{isPending:u,start:p,stop:c}}function q(e){var r;const n=t.unref(e);return(r=n==null?void 0:n.$el)!=null?r:n}const F=V?window:void 0,O=typeof globalThis!="undefined"?globalThis:typeof window!="undefined"?window:typeof global!="undefined"?global:typeof self!="undefined"?self:{},I="__vueuse_ssr_handlers__";O[I]=O[I]||{},O[I];function K(e,r,{window:n=F,initialValue:l=""}={}){const u=t.ref(l),s=t.computed(()=>{var d;return q(r)||((d=n==null?void 0:n.document)==null?void 0:d.documentElement)});return t.watch([s,()=>t.unref(e)],([d,c])=>{var p;if(d&&n){const v=(p=n.getComputedStyle(d).getPropertyValue(c))==null?void 0:p.trim();u.value=v||l}},{immediate:!0}),t.watch(u,d=>{var c;(c=s.value)!=null&&c.style&&s.value.style.setProperty(t.unref(e),d)}),u}function J(e,r={}){const{immediate:n=!0,window:l=F}=r,u=t.ref(!1);let s=null;function d(){!u.value||!l||(e(),s=l.requestAnimationFrame(d))}function c(){!u.value&&l&&(u.value=!0,d())}function p(){u.value=!1,s!=null&&l&&(l.cancelAnimationFrame(s),s=null)}return n&&c(),B(p),{isActive:u,pause:p,resume:c}}var A;(function(e){e.UP="UP",e.RIGHT="RIGHT",e.DOWN="DOWN",e.LEFT="LEFT",e.NONE="NONE"})(A||(A={}));function Q([e,r,n,l]){const u=(a,i)=>1-3*i+3*a,s=(a,i)=>3*i-6*a,d=a=>3*a,c=(a,i,o)=>((u(i,o)*a+s(i,o))*a+d(i))*a,p=(a,i,o)=>3*u(i,o)*a*a+2*s(i,o)*a+d(i),v=a=>{let i=a;for(let o=0;o<4;++o){const m=p(i,e,n);if(m===0)return i;i-=(c(i,e,n)-a)/m}return i};return a=>e===r&&n===l?a:c(v(a),r,l)}function X(e,r={}){const{delay:n=0,disabled:l=!1,duration:u=1e3,onFinished:s=H,onStarted:d=H,transition:c=j}=r,p=t.computed(()=>{const f=t.unref(c);return U(f)?f:Q(f)}),v=t.computed(()=>{const f=t.unref(e);return Y(f)?f:f.map(t.unref)}),a=t.computed(()=>Y(v.value)?[v.value]:v.value),i=t.ref(a.value.slice(0));let o,m,T,E,_;const{resume:M,pause:P}=J(()=>{const f=Date.now(),b=W(1-(T-f)/o,0,1);i.value=_.map((x,y)=>{var h;return x+((h=m[y])!=null?h:0)*p.value(b)}),b>=1&&(P(),s())},{immediate:!1}),R=()=>{P(),o=t.unref(u),m=i.value.map((f,b)=>{var x,y;return((x=a.value[b])!=null?x:0)-((y=i.value[b])!=null?y:0)}),_=i.value.slice(0),E=Date.now(),T=E+o,M(),d()},k=G(R,n,{immediate:!1});return t.watch(a,()=>{t.unref(l)?i.value=a.value.slice(0):t.unref(n)<=0?R():k.start()},{deep:!0}),t.computed(()=>{const f=t.unref(l)?a:i;return Y(v.value)?f.value[0]:f.value})}const Z=()=>{const e=t.ref({isTouch:!1,touchStart:0,touchDistance:0,touchX:0,touchY:0});return{touchPosition:e,initTouchPosition:()=>{e.value={isTouch:!1,touchStart:0,touchDistance:0,touchX:0,touchY:0}},touchStart:s=>{e.value.isTouch=!0,e.value.touchStart=s.touches[0].pageY},touchMove:s=>{e.value.isTouch&&(e.value.touchY=s.touches[0].pageY,e.value.touchDistance=e.value.touchStart-e.value.touchY,e.value.touchDistance>0&&(e.value.touchDistance=0))},touchEnd:()=>{e.value.isTouch=!1}}};function D(){const e=t.ref({isMouseDown:!1,downStart:0,mouseDistance:0,mouseX:0,mouseY:0});return{mousePosition:e,initMousePosition:()=>{e.value={isMouseDown:!1,downStart:0,mouseDistance:0,mouseX:0,mouseY:0}},mouseDown:s=>{e.value.isMouseDown=!0,e.value.downStart=s.pageY},mouseMove:s=>{e.value.isMouseDown&&(e.value.mouseY=s.pageY,e.value.mouseDistance=e.value.downStart-e.value.mouseY,e.value.mouseDistance>0&&(e.value.mouseDistance=0))},mouseUp:()=>{e.value.isMouseDown=!1}}}const S=e=>{var r,n;if(e.indexOf("px")>0)return Number(e.slice(0,e.indexOf("px")));if(e.indexOf("vh")>0){const l=Number(e.slice(0,e.indexOf("vh")));return window.innerHeight*(l/100)}else if(e.indexOf("vw")>0){const l=Number(e.slice(0,e.indexOf("vw")));return window.innerWidth*(l/100)}else if(e.indexOf("%")>0){const l=Number(e.slice(0,e.indexOf("%"))),u=Array.from(document.getElementsByClassName("swipe-modal-takumaru-vue-swipe-modal")),s=((n=(r=u[0].parentNode)==null?void 0:r.parentElement)==null?void 0:n.clientHeight)*(l/100);return console.log(u[0],s),s}else return 0};var oe="";t.install();var $=t.defineComponent({name:"swipeModal",model:{prop:"modelValue",event:"update:modelValue"},props:{modelValue:{type:Boolean,default:!1},dark:{type:Boolean,default:!1},persistent:{type:Boolean,default:!1},backgroundColor:{type:String,default:"#80808080"},fullscreen:{type:Boolean,default:!1},noTip:{type:Boolean,default:!1},contentsWidth:{type:String,default:"100%"},contentsHeight:{type:String,default:"30vh"},borderTopRadius:{type:String,default:null},borderTopLeftRadius:{type:String,default:"0px"},borderTopRightRadius:{type:String,default:"0px"},contentsColor:{type:String,default:"white"},tipColor:{type:String,default:"#c8c8c8"},darkContentsColor:{type:String,default:"#1E1E1E"}},emits:["update:modelValue","open","close"],setup(e,r){const{mousePosition:n,initMousePosition:l,mouseDown:u,mouseMove:s,mouseUp:d}=D(),{touchPosition:c,initTouchPosition:p,touchStart:v,touchMove:a,touchEnd:i}=Z(),o=t.toRefs(e),m=t.computed({get:()=>o.modelValue.value,set:g=>r.emit("update:modelValue",g)}),T=t.ref(250),E=t.ref(null),_=K("--tip-color",E);_.value=o.tipColor.value;const M=t.ref([parseInt(o.backgroundColor.value.slice(1,3),16),parseInt(o.backgroundColor.value.slice(3,5),16),parseInt(o.backgroundColor.value.slice(5,7),16),0]),P=X(M,{duration:250,transition:[.25,.8,.25,1]}),R=t.computed(()=>{const[g,C,ee,te]=P.value;return`rgba(${g}, ${C}, ${ee}, ${te})`}),k=t.ref(0),f=X(k,{duration:T.value,transition:[.25,.8,.25,1]}),b=t.computed(()=>f.value+(Math.abs(c.value.touchDistance)>Math.abs(n.value.mouseDistance)?c.value.touchDistance:n.value.mouseDistance)),x=()=>{document.documentElement.style.overflowY="auto",m.value=!1},y=()=>{r.emit("open"),document.documentElement.style.overflowY="hidden",k.value=0,M.value=[parseInt(o.backgroundColor.value.slice(1,3),16),parseInt(o.backgroundColor.value.slice(3,5),16),parseInt(o.backgroundColor.value.slice(5,7),16),parseInt(o.backgroundColor.value.slice(7,9),16)/255]},h=()=>{k.value=-1*S(o.contentsHeight.value)-(Math.abs(c.value.touchDistance)>Math.abs(n.value.mouseDistance)?c.value.touchDistance:n.value.mouseDistance),M.value=[parseInt(o.backgroundColor.value.slice(1,3),16),parseInt(o.backgroundColor.value.slice(3,5),16),parseInt(o.backgroundColor.value.slice(5,7),16),0],setTimeout(()=>{l(),p(),x(),r.emit("close")},T.value)},z=()=>{i(),-1*c.value.touchDistance>S(o.contentsHeight.value)/8?h():c.value.touchDistance=0},L=()=>{d(),-1*n.value.mouseDistance>S(o.contentsHeight.value)/8?h():n.value.mouseDistance=0};return t.watch(m,(g,C)=>{m.value&&y()}),t.onMounted(()=>{k.value=-1*S(o.contentsHeight.value)}),()=>{var g,C;return t.h("div",{class:"swipe-modal-takumaru-vue-swipe-modal",on:{mousemove:s,mouseup:L},onMousemove:s,onMouseup:L},[o.modelValue.value?t.h("div",{class:"modal-background",style:{backgroundColor:R.value},on:{onMouseup:()=>o.persistent.value?()=>null:h(),click:()=>o.persistent.value?()=>null:h()},onMouseup:()=>{o.persistent.value||h()},onClick:()=>{o.persistent.value||h()}}):null,o.modelValue.value?t.h("div",{class:"modal-contents",style:{width:o.contentsWidth.value,minHeight:o.contentsHeight.value,borderTopLeftRadius:o.borderTopRadius.value?o.borderTopRadius.value:o.borderTopLeftRadius.value,borderTopRightRadius:o.borderTopRadius?o.borderTopRadius.value:o.borderTopRightRadius.value,backgroundColor:o.dark.value?o.darkContentsColor.value:o.contentsColor.value,color:o.dark.value?"white":"black",bottom:`${b.value}px`},on:{touchstart:v,touchmove:a,touchend:z},onTouchstart:v,onTouchmove:a,onTouchend:z},[o.noTip.value?null:t.h("div",{class:"modal-contents-chip-wrapper",on:{mousedown:u},onMousedown:u},[t.h("div",{class:"modal-contents-chip"})]),(C=(g=r.slots).default)==null?void 0:C.call(g)]):null])}}});w.default=$,w.swipeModal=$,Object.defineProperties(w,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package.json

 {
   "name": "@takuma-ru/vue-swipe-modal",
-  "version": "4.0.1",
+  "version": "4.0.2",
   "private": false,
@@ -5,0 +5,0 @@ "description": "Swipeable Bottom Sheet library for vue2 and vue3",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Unpublished package

Supply chain risk

Package version was not found on the registry. It may exist on a different registry and need to be configured to pull from that registry.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

44354

increased by2.62%

Lines of code

638

increased by2.08%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes