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

Comparing version 4.0.3 to 4.0.4

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"),Y;const I=typeof window!="undefined",G=e=>typeof e!="undefined",q=e=>typeof e=="function",R=e=>typeof e=="number",j=(e,n,l)=>Math.min(l,Math.max(n,e)),$=()=>{};I&&((Y=window==null?void 0:window.navigator)==null?void 0:Y.userAgent)&&/iP(ad|hone|od)/.test(window.navigator.userAgent);function K(e){return e}function F(e){return o.getCurrentScope()?(o.onScopeDispose(e),!0):!1}function J(e,n=!0){o.getCurrentInstance()?o.onMounted(e):n?e():o.nextTick(e)}function Q(e,n,l={}){const{immediate:v=!0}=l,i=o.ref(!1);let u=null;function d(){u&&(clearTimeout(u),u=null)}function c(){i.value=!1,d()}function r(...f){d(),i.value=!0,u=setTimeout(()=>{i.value=!1,u=null,e(...f)},o.unref(n))}return v&&(i.value=!0,I&&r()),F(c),{isPending:i,start:r,stop:c}}function Z(e){var n;const l=o.unref(e);return(n=l==null?void 0:l.$el)!=null?n:l}const A=I?window:void 0,k=typeof globalThis!="undefined"?globalThis:typeof window!="undefined"?window:typeof global!="undefined"?global:typeof self!="undefined"?self:{},H="__vueuse_ssr_handlers__";k[H]=k[H]||{};k[H];function z(e,n,{window:l=A,initialValue:v=""}={}){const i=o.ref(v),u=o.computed(()=>{var d;return Z(n)||((d=l==null?void 0:l.document)==null?void 0:d.documentElement)});return o.watch([u,()=>o.unref(e)],([d,c])=>{var r;if(d&&l){const f=(r=l.getComputedStyle(d).getPropertyValue(c))==null?void 0:r.trim();i.value=f||v}},{immediate:!0}),o.watch(i,d=>{var c;(c=u.value)!=null&&c.style&&u.value.style.setProperty(o.unref(e),d)}),i}function ee(e,n={}){const{immediate:l=!0,window:v=A}=n,i=o.ref(!1);let u=null;function d(){!i.value||!v||(e(),u=v.requestAnimationFrame(d))}function c(){!i.value&&v&&(i.value=!0,d())}function r(){i.value=!1,u!=null&&v&&(v.cancelAnimationFrame(u),u=null)}return l&&c(),F(r),{isActive:i,pause:r,resume:c}}var B;(function(e){e.UP="UP",e.RIGHT="RIGHT",e.DOWN="DOWN",e.LEFT="LEFT",e.NONE="NONE"})(B||(B={}));function te([e,n,l,v]){const i=(a,s)=>1-3*s+3*a,u=(a,s)=>3*s-6*a,d=a=>3*a,c=(a,s,m)=>((i(s,m)*a+u(s,m))*a+d(s))*a,r=(a,s,m)=>3*i(s,m)*a*a+2*u(s,m)*a+d(s),f=a=>{let s=a;for(let m=0;m<4;++m){const t=r(s,e,l);if(t===0)return s;s-=(c(s,e,l)-a)/t}return s};return a=>e===n&&l===v?a:c(f(a),n,v)}function W(e,n={}){const{delay:l=0,disabled:v=!1,duration:i=1e3,onFinished:u=$,onStarted:d=$,transition:c=K}=n,r=o.computed(()=>{const p=o.unref(c);return q(p)?p:te(p)}),f=o.computed(()=>{const p=o.unref(e);return R(p)?p:p.map(o.unref)}),a=o.computed(()=>R(f.value)?[f.value]:f.value),s=o.ref(a.value.slice(0));let m,t,g,w,T;const{resume:h,pause:b}=ee(()=>{const p=Date.now(),D=j(1-(g-p)/m,0,1);s.value=T.map((M,y)=>{var _;return M+((_=t[y])!=null?_:0)*r.value(D)}),D>=1&&(b(),u())},{immediate:!1}),V=()=>{b(),m=o.unref(i),t=s.value.map((p,D)=>{var M,y;return((M=a.value[D])!=null?M:0)-((y=s.value[D])!=null?y:0)}),T=s.value.slice(0),w=Date.now(),g=w+m,h(),d()},P=Q(V,l,{immediate:!1});return o.watch(a,()=>{o.unref(v)?s.value=a.value.slice(0):o.unref(l)<=0?V():P.start()},{deep:!0}),o.computed(()=>{const p=o.unref(v)?a:s;return R(f.value)?p.value[0]:p.value})}function oe(e,n,l,v={}){var i,u,d,c,r;const{passive:f=!1,eventName:a,deep:s=!1,defaultValue:m}=v,t=o.getCurrentInstance(),g=l||(t==null?void 0:t.emit)||((i=t==null?void 0:t.$emit)==null?void 0:i.bind(t))||((d=(u=t==null?void 0:t.proxy)==null?void 0:u.$emit)==null?void 0:d.bind(t==null?void 0:t.proxy));let w=a;if(!n)if(o.isVue2){const h=(r=(c=t==null?void 0:t.proxy)==null?void 0:c.$options)==null?void 0:r.model;n=(h==null?void 0:h.value)||"value",a||(w=(h==null?void 0:h.event)||"input")}else n="modelValue";w=a||w||`update:${n.toString()}`;const T=()=>G(e[n])?e[n]:m;if(f){const h=o.ref(T());return o.watch(()=>e[n],b=>h.value=b),o.watch(h,b=>{(b!==e[n]||s)&&g(w,b)},{deep:s}),h}else return o.computed({get(){return T()},set(h){g(w,h)}})}const ne=()=>{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 ue(){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,n)=>{const l=e.indexOf("px"),v=e.indexOf("vh"),i=e.indexOf("vw"),u=e.indexOf("vmin"),d=e.indexOf("vmax"),c=e.indexOf("%");if(l>0)return Number(e.slice(0,l));if(v>0){const r=Number(e.slice(0,v));return window.innerHeight*(r/100)}else if(i>0){const r=Number(e.slice(0,i));return window.innerWidth*(r/100)}else if(u>0){const r=Number(e.slice(0,u));return window.innerWidth<window.innerHeight?window.innerWidth:window.innerHeight*(r/100)}else if(d>0){const r=Number(e.slice(0,d));return window.innerWidth<window.innerHeight?window.innerHeight:window.innerWidth*(r/100)}else if(c>0){let r=0;return J(()=>{var s,m;const f=((m=(s=n==null?void 0:n.value)==null?void 0:s.parentElement)==null?void 0:m.clientHeight)||document.documentElement.clientHeight,a=Number(e.slice(0,c));r=f*(a/100)}),r||document.documentElement.clientHeight}else return 0};o.install();var X=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,n){const{mousePosition:l,initMousePosition:v,mouseDown:i,mouseMove:u,mouseUp:d}=ue(),{touchPosition:c,initTouchPosition:r,touchStart:f,touchMove:a,touchEnd:s}=ne(),m=oe(e,"modelValue",n.emit),t=o.toRefs(e),g=o.ref(),w=o.ref(280),T=o.ref(null),h=z("--tip-color",T);h.value=t.tipColor.value;const b=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]),V=W(b,{duration:250,transition:[.25,.8,.25,1]}),P=o.computed(()=>{const[x,S,U,L]=V.value;return`rgba(${x}, ${S}, ${U}, ${L})`}),p=o.ref(-1*E(t.contentsHeight.value,g)),D=W(p,{duration:w.value,transition:[.25,.8,.25,1]}),M=o.computed(()=>D.value+(Math.abs(c.value.touchDistance)>Math.abs(l.value.mouseDistance)?c.value.touchDistance:l.value.mouseDistance)),y=()=>{document.documentElement.style.overflowY="auto",m.value=!1},_=()=>{n.emit("open"),document.documentElement.style.overflowY="hidden",p.value=0,b.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]},C=()=>{p.value=-1*E(t.contentsHeight.value,g)-(Math.abs(c.value.touchDistance)>Math.abs(l.value.mouseDistance)?c.value.touchDistance:l.value.mouseDistance),b.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(()=>{v(),r(),y(),n.emit("close")},w.value)},N=()=>{s(),-1*c.value.touchDistance>E(t.contentsHeight.value,g)/8?C():c.value.touchDistance=0},O=()=>{d(),-1*l.value.mouseDistance>E(t.contentsHeight.value,g)/8?C():l.value.mouseDistance=0};return o.watch(m,(x,S)=>{m.value&&_()}),()=>{var x,S;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:P.value},on:{onMouseup:()=>t.persistent.value?()=>null:C(),click:()=>t.persistent.value?()=>null:C()},onMouseup:()=>{t.persistent.value||C()},onClick:()=>{t.persistent.value||C()}}):null,t.modelValue.value?o.h("div",{ref:g,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:`${M.value}px`},on:{touchstart:f,touchmove:a,touchend:N},onTouchstart:f,onTouchmove:a,onTouchend:N},[t.noTip.value?null:o.h("div",{class:"modal-contents-chip-wrapper",on:{mousedown:i},onMousedown:i},[o.h("div",{class:"modal-contents-chip"})]),(S=(x=n.slots).default)==null?void 0:S.call(x)]):null])}}});exports.default=X;exports.swipeModal=X;

dist/swipe-modal.es.js

@@ -1,4 +0,5 @@
-(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 { getCurrentInstance, onMounted, nextTick, ref, unref, getCurrentScope, onScopeDispose, computed, watch, isVue2, install, defineComponent, toRefs, h } from "vue-demi";
 var _a;
 const isClient = typeof window !== "undefined";
+const isDef = (val) => typeof val !== "undefined";
 const isFunction = (val) => typeof val === "function";
@@ -20,2 +21,10 @@ const isNumber = (val) => typeof val === "number";
 }
+function tryOnMounted(fn, sync = true) {
+  if (getCurrentInstance())
+    onMounted(fn);
+  else if (sync)
+    fn();
+  else
+    nextTick(fn);
+}
 function useTimeoutFn(cb, interval, options = {}) {
@@ -215,2 +224,46 @@ const {
 }
+function useVModel(props, key, emit, options = {}) {
+  var _a2, _b, _c, _d, _e;
+  const {
+    passive = false,
+    eventName,
+    deep = false,
+    defaultValue
+  } = options;
+  const vm = getCurrentInstance();
+  const _emit = emit || (vm == null ? void 0 : vm.emit) || ((_a2 = vm == null ? void 0 : vm.$emit) == null ? void 0 : _a2.bind(vm)) || ((_c = (_b = vm == null ? void 0 : vm.proxy) == null ? void 0 : _b.$emit) == null ? void 0 : _c.bind(vm == null ? void 0 : vm.proxy));
+  let event = eventName;
+  if (!key) {
+    if (isVue2) {
+      const modelOptions = (_e = (_d = vm == null ? void 0 : vm.proxy) == null ? void 0 : _d.$options) == null ? void 0 : _e.model;
+      key = (modelOptions == null ? void 0 : modelOptions.value) || "value";
+      if (!eventName)
+        event = (modelOptions == null ? void 0 : modelOptions.event) || "input";
+    } else {
+      key = "modelValue";
+    }
+  }
+  event = eventName || event || `update:${key.toString()}`;
+  const getValue = () => isDef(props[key]) ? props[key] : defaultValue;
+  if (passive) {
+    const proxy = ref(getValue());
+    watch(() => props[key], (v) => proxy.value = v);
+    watch(proxy, (v) => {
+      if (v !== props[key] || deep)
+        _emit(event, v);
+    }, {
+      deep
+    });
+    return proxy;
+  } else {
+    return computed({
+      get() {
+        return getValue();
+      },
+      set(value) {
+        _emit(event, value);
+      }
+    });
+  }
+}
 const useTouchEvent = () => {
@@ -298,14 +351,37 @@ const touchPosition = ref({
 }
-const toPixel = (payload) => {
-  if (payload.indexOf("px") > 0) {
-    const px = Number(payload.slice(0, payload.indexOf("px")));
+const toPixel = (size, element) => {
+  const pxVal = size.indexOf("px");
+  const vhVal = size.indexOf("vh");
+  const vwVal = size.indexOf("vw");
+  const vminVal = size.indexOf("vmin");
+  const vmaxVal = size.indexOf("vmax");
+  const percentVal = size.indexOf("%");
+  if (pxVal > 0) {
+    const px = Number(size.slice(0, pxVal));
     return px;
-  } else if (payload.indexOf("vh") > 0) {
-    const vh = Number(payload.slice(0, payload.indexOf("vh")));
+  } else if (vhVal > 0) {
+    const vh = Number(size.slice(0, vhVal));
     const px = window.innerHeight * (vh / 100);
     return px;
-  } else if (payload.indexOf("vw") > 0) {
-    const vw = Number(payload.slice(0, payload.indexOf("vw")));
+  } else if (vwVal > 0) {
+    const vw = Number(size.slice(0, vwVal));
     const px = window.innerWidth * (vw / 100);
     return px;
+  } else if (vminVal > 0) {
+    const vmin = Number(size.slice(0, vminVal));
+    const px = window.innerWidth < window.innerHeight ? window.innerWidth : window.innerHeight * (vmin / 100);
+    return px;
+  } else if (vmaxVal > 0) {
+    const vmax = Number(size.slice(0, vmaxVal));
+    const px = window.innerWidth < window.innerHeight ? window.innerHeight : window.innerWidth * (vmax / 100);
+    return px;
+  } else if (percentVal > 0) {
+    let px = 0;
+    tryOnMounted(() => {
+      var _a2, _b;
+      const parentHeight = ((_b = (_a2 = element == null ? void 0 : element.value) == null ? void 0 : _a2.parentElement) == null ? void 0 : _b.clientHeight) || document.documentElement.clientHeight;
+      const percent = Number(size.slice(0, percentVal));
+      px = parentHeight * (percent / 100);
+    });
+    return px ? px : document.documentElement.clientHeight;
   } else {
@@ -397,8 +473,6 @@ return 0;
     } = useTouchEvent();
+    const modal = useVModel(props, "modelValue", context.emit);
     const propsRef = toRefs(props);
-    const modal = computed({
-      get: () => propsRef.modelValue.value,
-      set: (value) => context.emit("update:modelValue", value)
-    });
-    const contentsBottomPositionTransitionDuration = ref(250);
+    const swipeModal2 = ref();
+    const contentsBottomPositionTransitionDuration = ref(280);
     const el = ref(null);
@@ -421,3 +495,3 @@ const tipColor = useCssVar("--tip-color", el);
     });
-    const contentsBottomPosition = ref(-1 * toPixel(propsRef.contentsHeight.value));
+    const contentsBottomPosition = ref(-1 * toPixel(propsRef.contentsHeight.value, swipeModal2));
     const contentsBottomPositionTransition = useTransition(contentsBottomPosition, {
@@ -447,3 +521,3 @@ duration: contentsBottomPositionTransitionDuration.value,
     const close = () => {
-      contentsBottomPosition.value = -1 * toPixel(propsRef.contentsHeight.value) - (Math.abs(touchPosition.value.touchDistance) > Math.abs(mousePosition.value.mouseDistance) ? touchPosition.value.touchDistance : mousePosition.value.mouseDistance);
+      contentsBottomPosition.value = -1 * toPixel(propsRef.contentsHeight.value, swipeModal2) - (Math.abs(touchPosition.value.touchDistance) > Math.abs(mousePosition.value.mouseDistance) ? touchPosition.value.touchDistance : mousePosition.value.mouseDistance);
       backgroundColor.value = [
@@ -464,3 +538,3 @@ parseInt(propsRef.backgroundColor.value.slice(1, 3), 16),
       touchEnd();
-      if (-1 * touchPosition.value.touchDistance > toPixel(propsRef.contentsHeight.value) / 8) {
+      if (-1 * touchPosition.value.touchDistance > toPixel(propsRef.contentsHeight.value, swipeModal2) / 8) {
         close();
@@ -473,3 +547,3 @@ } else {
       mouseUp();
-      if (-1 * mousePosition.value.mouseDistance > toPixel(propsRef.contentsHeight.value) / 8) {
+      if (-1 * mousePosition.value.mouseDistance > toPixel(propsRef.contentsHeight.value, swipeModal2) / 8) {
         close();
@@ -513,2 +587,3 @@ } else {
         propsRef.modelValue.value ? h("div", {
+          ref: swipeModal2,
           class: "modal-contents",
@@ -515,0 +590,0 @@ style: {

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(T,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("vue-demi")):typeof define=="function"&&define.amd?define(["exports","vue-demi"],t):(T=typeof globalThis!="undefined"?globalThis:T||self,t(T.swipeModal={},T.vueDemi))})(this,function(T,t){"use strict";`;document.head.appendChild(__vite_style__);var O;const R=typeof window!="undefined",j=e=>typeof e!="undefined",G=e=>typeof e=="function",H=e=>typeof e=="number",q=(e,n,u)=>Math.min(u,Math.max(n,e)),$=()=>{};R&&((O=window==null?void 0:window.navigator)==null?void 0:O.userAgent)&&/iP(ad|hone|od)/.test(window.navigator.userAgent);function K(e){return e}function B(e){return t.getCurrentScope()?(t.onScopeDispose(e),!0):!1}function J(e,n=!0){t.getCurrentInstance()?t.onMounted(e):n?e():t.nextTick(e)}function Q(e,n,u={}){const{immediate:f=!0}=u,i=t.ref(!1);let l=null;function d(){l&&(clearTimeout(l),l=null)}function c(){i.value=!1,d()}function r(...p){d(),i.value=!0,l=setTimeout(()=>{i.value=!1,l=null,e(...p)},t.unref(n))}return f&&(i.value=!0,R&&r()),B(c),{isPending:i,start:r,stop:c}}function Z(e){var n;const u=t.unref(e);return(n=u==null?void 0:u.$el)!=null?n:u}const W=R?window:void 0,I=typeof globalThis!="undefined"?globalThis:typeof window!="undefined"?window:typeof global!="undefined"?global:typeof self!="undefined"?self:{},Y="__vueuse_ssr_handlers__";I[Y]=I[Y]||{},I[Y];function z(e,n,{window:u=W,initialValue:f=""}={}){const i=t.ref(f),l=t.computed(()=>{var d;return Z(n)||((d=u==null?void 0:u.document)==null?void 0:d.documentElement)});return t.watch([l,()=>t.unref(e)],([d,c])=>{var r;if(d&&u){const p=(r=u.getComputedStyle(d).getPropertyValue(c))==null?void 0:r.trim();i.value=p||f}},{immediate:!0}),t.watch(i,d=>{var c;(c=l.value)!=null&&c.style&&l.value.style.setProperty(t.unref(e),d)}),i}function D(e,n={}){const{immediate:u=!0,window:f=W}=n,i=t.ref(!1);let l=null;function d(){!i.value||!f||(e(),l=f.requestAnimationFrame(d))}function c(){!i.value&&f&&(i.value=!0,d())}function r(){i.value=!1,l!=null&&f&&(f.cancelAnimationFrame(l),l=null)}return u&&c(),B(r),{isActive:i,pause:r,resume:c}}var F;(function(e){e.UP="UP",e.RIGHT="RIGHT",e.DOWN="DOWN",e.LEFT="LEFT",e.NONE="NONE"})(F||(F={}));function ee([e,n,u,f]){const i=(a,s)=>1-3*s+3*a,l=(a,s)=>3*s-6*a,d=a=>3*a,c=(a,s,v)=>((i(s,v)*a+l(s,v))*a+d(s))*a,r=(a,s,v)=>3*i(s,v)*a*a+2*l(s,v)*a+d(s),p=a=>{let s=a;for(let v=0;v<4;++v){const o=r(s,e,u);if(o===0)return s;s-=(c(s,e,u)-a)/o}return s};return a=>e===n&&u===f?a:c(p(a),n,f)}function A(e,n={}){const{delay:u=0,disabled:f=!1,duration:i=1e3,onFinished:l=$,onStarted:d=$,transition:c=K}=n,r=t.computed(()=>{const h=t.unref(c);return G(h)?h:ee(h)}),p=t.computed(()=>{const h=t.unref(e);return H(h)?h:h.map(t.unref)}),a=t.computed(()=>H(p.value)?[p.value]:p.value),s=t.ref(a.value.slice(0));let v,o,w,g,x;const{resume:m,pause:b}=D(()=>{const h=Date.now(),y=q(1-(w-h)/v,0,1);s.value=x.map((M,C)=>{var P;return M+((P=o[C])!=null?P:0)*r.value(y)}),y>=1&&(b(),l())},{immediate:!1}),E=()=>{b(),v=t.unref(i),o=s.value.map((h,y)=>{var M,C;return((M=a.value[y])!=null?M:0)-((C=s.value[y])!=null?C:0)}),x=s.value.slice(0),g=Date.now(),w=g+v,m(),d()},N=Q(E,u,{immediate:!1});return t.watch(a,()=>{t.unref(f)?s.value=a.value.slice(0):t.unref(u)<=0?E():N.start()},{deep:!0}),t.computed(()=>{const h=t.unref(f)?a:s;return H(p.value)?h.value[0]:h.value})}function te(e,n,u,f={}){var i,l,d,c,r;const{passive:p=!1,eventName:a,deep:s=!1,defaultValue:v}=f,o=t.getCurrentInstance(),w=u||(o==null?void 0:o.emit)||((i=o==null?void 0:o.$emit)==null?void 0:i.bind(o))||((d=(l=o==null?void 0:o.proxy)==null?void 0:l.$emit)==null?void 0:d.bind(o==null?void 0:o.proxy));let g=a;if(!n)if(t.isVue2){const m=(r=(c=o==null?void 0:o.proxy)==null?void 0:c.$options)==null?void 0:r.model;n=(m==null?void 0:m.value)||"value",a||(g=(m==null?void 0:m.event)||"input")}else n="modelValue";g=a||g||`update:${n.toString()}`;const x=()=>j(e[n])?e[n]:v;if(p){const m=t.ref(x());return t.watch(()=>e[n],b=>m.value=b),t.watch(m,b=>{(b!==e[n]||s)&&w(g,b)},{deep:s}),m}else return t.computed({get(){return x()},set(m){w(g,m)}})}const oe=()=>{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:l=>{e.value.isTouch=!0,e.value.touchStart=l.touches[0].pageY},touchMove:l=>{e.value.isTouch&&(e.value.touchY=l.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 ne(){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:l=>{e.value.isMouseDown=!0,e.value.downStart=l.pageY},mouseMove:l=>{e.value.isMouseDown&&(e.value.mouseY=l.pageY,e.value.mouseDistance=e.value.downStart-e.value.mouseY,e.value.mouseDistance>0&&(e.value.mouseDistance=0))},mouseUp:()=>{e.value.isMouseDown=!1}}}const V=(e,n)=>{const u=e.indexOf("px"),f=e.indexOf("vh"),i=e.indexOf("vw"),l=e.indexOf("vmin"),d=e.indexOf("vmax"),c=e.indexOf("%");if(u>0)return Number(e.slice(0,u));if(f>0){const r=Number(e.slice(0,f));return window.innerHeight*(r/100)}else if(i>0){const r=Number(e.slice(0,i));return window.innerWidth*(r/100)}else if(l>0){const r=Number(e.slice(0,l));return window.innerWidth<window.innerHeight?window.innerWidth:window.innerHeight*(r/100)}else if(d>0){const r=Number(e.slice(0,d));return window.innerWidth<window.innerHeight?window.innerHeight:window.innerWidth*(r/100)}else if(c>0){let r=0;return J(()=>{var s,v;const p=((v=(s=n==null?void 0:n.value)==null?void 0:s.parentElement)==null?void 0:v.clientHeight)||document.documentElement.clientHeight,a=Number(e.slice(0,c));r=p*(a/100)}),r||document.documentElement.clientHeight}else return 0};var ae="";t.install();var X=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,n){const{mousePosition:u,initMousePosition:f,mouseDown:i,mouseMove:l,mouseUp:d}=ne(),{touchPosition:c,initTouchPosition:r,touchStart:p,touchMove:a,touchEnd:s}=oe(),v=te(e,"modelValue",n.emit),o=t.toRefs(e),w=t.ref(),g=t.ref(280),x=t.ref(null),m=z("--tip-color",x);m.value=o.tipColor.value;const b=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]),E=A(b,{duration:250,transition:[.25,.8,.25,1]}),N=t.computed(()=>{const[_,S,le,ue]=E.value;return`rgba(${_}, ${S}, ${le}, ${ue})`}),h=t.ref(-1*V(o.contentsHeight.value,w)),y=A(h,{duration:g.value,transition:[.25,.8,.25,1]}),M=t.computed(()=>y.value+(Math.abs(c.value.touchDistance)>Math.abs(u.value.mouseDistance)?c.value.touchDistance:u.value.mouseDistance)),C=()=>{document.documentElement.style.overflowY="auto",v.value=!1},P=()=>{n.emit("open"),document.documentElement.style.overflowY="hidden",h.value=0,b.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]},k=()=>{h.value=-1*V(o.contentsHeight.value,w)-(Math.abs(c.value.touchDistance)>Math.abs(u.value.mouseDistance)?c.value.touchDistance:u.value.mouseDistance),b.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(()=>{f(),r(),C(),n.emit("close")},g.value)},L=()=>{s(),-1*c.value.touchDistance>V(o.contentsHeight.value,w)/8?k():c.value.touchDistance=0},U=()=>{d(),-1*u.value.mouseDistance>V(o.contentsHeight.value,w)/8?k():u.value.mouseDistance=0};return t.watch(v,(_,S)=>{v.value&&P()}),()=>{var _,S;return t.h("div",{class:"swipe-modal-takumaru-vue-swipe-modal",on:{mousemove:l,mouseup:U},onMousemove:l,onMouseup:U},[o.modelValue.value?t.h("div",{class:"modal-background",style:{backgroundColor:N.value},on:{onMouseup:()=>o.persistent.value?()=>null:k(),click:()=>o.persistent.value?()=>null:k()},onMouseup:()=>{o.persistent.value||k()},onClick:()=>{o.persistent.value||k()}}):null,o.modelValue.value?t.h("div",{ref:w,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:`${M.value}px`},on:{touchstart:p,touchmove:a,touchend:L},onTouchstart:p,onTouchmove:a,onTouchend:L},[o.noTip.value?null:t.h("div",{class:"modal-contents-chip-wrapper",on:{mousedown:i},onMousedown:i},[t.h("div",{class:"modal-contents-chip"})]),(S=(_=n.slots).default)==null?void 0:S.call(_)]):null])}}});T.default=X,T.swipeModal=X,Object.defineProperties(T,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package.json

 {
   "name": "@takuma-ru/vue-swipe-modal",
-  "version": "4.0.3",
+  "version": "4.0.4",
   "private": false,
@@ -56,3 +56,3 @@ "description": "Swipeable Bottom Sheet library for vue2 and vue3",
     "@vueuse/core": "8.9.4",
-    "vue-demi": "^0.13.4"
+    "vue-demi": "^0.13.8"
   },
@@ -69,3 +69,3 @@ "devDependencies": {
     "vue-tsc": "^0.34.7",
-    "vue2": "npm:vue@^2.6.0"
+    "vue2": "npm:vue@^2.6.14"
   },
@@ -72,0 +72,0 @@ "peerDependencies": {

README.md

@@ -157,9 +157,1 @@ # @takuma-ru/vue-swpie-modal
 | **dark-contents-color** | String | `black` | Modal background color in dark mode |
-
-## :warning: WARN
-- #### ontents-height supports only "px", "vh", and "vw".
-  Contents-height of "%", "vmin", etc. are not supported. We are currently working on a feature to allow use of these values. Please wait a little.
-- #### The behavior of vue2.x may be unstable.
-  This library is based on [vue-demi](https://github.com/vueuse/vue-demi) and developed in the vue3 environment. Therefore, there is a risk that parts of the library that are not interoperable with vue2.x may not work properly.
-We are working on a way to address this issue as well. However, it is a very complex issue and will take time to resolve.
-Please use vue3 as much as possible.

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

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

48672

increased by10.92%

Lines of code

711

increased by13.76%

Worsened metrics

Number of lines in readme file

157

decreased by-4.85%

Dependency changes

• Updatedvue-demi@^0.13.8