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

Comparing version 4.0.0-alpha.8 to 4.0.0-alpha.9

dist/swipe-modal.cjs.js

@@ -1,1 +0,1 @@
-(function(){ try {var elementStyle = document.createElement('style'); elementStyle.appendChild(document.createTextNode(".hello{color:gray}:root{--contents-height: 30vh;--contents-bottom-position: 0%}.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;min-height:var(--contents-height);max-height:100vh;bottom:var(--contents-bottom-position);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)}.swipe-modal-takumaru-vue-swipe-modal .swipe-modal-background-enter,.swipe-modal-takumaru-vue-swipe-modal .swipe-modal-background-enter-from{opacity:0}.swipe-modal-takumaru-vue-swipe-modal .swipe-modal-background-enter-active{transition:all .2s ease-out}.swipe-modal-takumaru-vue-swipe-modal .swipe-modal-background-enter-to,.swipe-modal-takumaru-vue-swipe-modal .swipe-modal-background-leave,.swipe-modal-takumaru-vue-swipe-modal .swipe-modal-background-leave-from{opacity:1}.swipe-modal-takumaru-vue-swipe-modal .swipe-modal-background-leave-active{transition:all .2s ease-out}.swipe-modal-takumaru-vue-swipe-modal .swipe-modal-background-leave-to{opacity:0}.swipe-modal-takumaru-vue-swipe-modal .swipe-modal-contents-enter,.swipe-modal-takumaru-vue-swipe-modal .swipe-modal-contents-enter-from{bottom:calc(-1 * var(--contents-height))!important}.swipe-modal-takumaru-vue-swipe-modal .swipe-modal-contents-enter-active{transition:all .3s cubic-bezier(.25,.8,.25,1)}.swipe-modal-takumaru-vue-swipe-modal .swipe-modal-contents-enter-to,.swipe-modal-takumaru-vue-swipe-modal .swipe-modal-contents-leave,.swipe-modal-takumaru-vue-swipe-modal .swipe-modal-contents-leave-from{bottom:var(--contents-bottom-position)!important}.swipe-modal-takumaru-vue-swipe-modal .swipe-modal-contents-leave-active{transition:all .25s cubic-bezier(.25,.8,.25,1)}.swipe-modal-takumaru-vue-swipe-modal .swipe-modal-contents-leave-to{bottom:calc(-1 * var(--contents-height))!important}")); 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"),E;const k=typeof window!="undefined",N=n=>typeof n=="function",h=n=>typeof n=="number",O=(n,c,r)=>Math.min(r,Math.max(c,n)),P=()=>{};k&&((E=window==null?void 0:window.navigator)==null?void 0:E.userAgent)&&/iP(ad|hone|od)/.test(window.navigator.userAgent);function W(n){return n}function R(n){return o.getCurrentScope()?(o.onScopeDispose(n),!0):!1}function $(n,c,r={}){const{immediate:s=!0}=r,e=o.ref(!1);let u=null;function i(){u&&(clearTimeout(u),u=null)}function f(){e.value=!1,i()}function v(...p){i(),e.value=!0,u=setTimeout(()=>{e.value=!1,u=null,n(...p)},o.unref(c))}return s&&(e.value=!0,k&&v()),R(f),{isPending:e,start:v,stop:f}}const G=k?window:void 0,C=typeof globalThis!="undefined"?globalThis:typeof window!="undefined"?window:typeof global!="undefined"?global:typeof self!="undefined"?self:{},T="__vueuse_ssr_handlers__";C[T]=C[T]||{};C[T];function H(n,c={}){const{immediate:r=!0,window:s=G}=c,e=o.ref(!1);let u=null;function i(){!e.value||!s||(n(),u=s.requestAnimationFrame(i))}function f(){!e.value&&s&&(e.value=!0,i())}function v(){e.value=!1,u!=null&&s&&(s.cancelAnimationFrame(u),u=null)}return r&&f(),R(v),{isActive:e,pause:v,resume:f}}var F;(function(n){n.UP="UP",n.RIGHT="RIGHT",n.DOWN="DOWN",n.LEFT="LEFT",n.NONE="NONE"})(F||(F={}));function L([n,c,r,s]){const e=(l,t)=>1-3*t+3*l,u=(l,t)=>3*t-6*l,i=l=>3*l,f=(l,t,a)=>((e(t,a)*l+u(t,a))*l+i(t))*l,v=(l,t,a)=>3*e(t,a)*l*l+2*u(t,a)*l+i(t),p=l=>{let t=l;for(let a=0;a<4;++a){const m=v(t,n,r);if(m===0)return t;t-=(f(t,n,r)-l)/m}return t};return l=>n===c&&r===s?l:f(p(l),c,s)}function X(n,c={}){const{delay:r=0,disabled:s=!1,duration:e=1e3,onFinished:u=P,onStarted:i=P,transition:f=W}=c,v=o.computed(()=>{const d=o.unref(f);return N(d)?d:L(d)}),p=o.computed(()=>{const d=o.unref(n);return h(d)?d:d.map(o.unref)}),l=o.computed(()=>h(p.value)?[p.value]:p.value),t=o.ref(l.value.slice(0));let a,m,g,V,S;const{resume:B,pause:I}=H(()=>{const d=Date.now(),b=O(1-(g-d)/a,0,1);t.value=S.map((y,w)=>{var _;return y+((_=m[w])!=null?_:0)*v.value(b)}),b>=1&&(I(),u())},{immediate:!1}),M=()=>{I(),a=o.unref(e),m=t.value.map((d,b)=>{var y,w;return((y=l.value[b])!=null?y:0)-((w=t.value[b])!=null?w:0)}),S=t.value.slice(0),V=Date.now(),g=V+a,B(),i()},D=$(M,r,{immediate:!1});return o.watch(l,()=>{o.unref(s)?t.value=l.value.slice(0):o.unref(r)<=0?M():D.start()},{deep:!0}),o.computed(()=>{const d=o.unref(s)?l:t;return h(p.value)?d.value[0]:d.value})}const q=()=>({touchPosition:o.ref({isTouch:!1,x:0,y:0})});function x(){return{mousePosition:o.ref({isMouseDown:!1,x:0,y:0})}}o.install();var A=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"],setup(n,c){const{mousePosition:r}=x(),{touchPosition:s}=q(),e=o.toRefs(n),u=o.computed({get:()=>e.modelValue.value,set:t=>c.emit("update:modelValue",t)}),i=o.ref([parseInt(e.backgroundColor.value.slice(1,3),16),parseInt(e.backgroundColor.value.slice(3,5),16),parseInt(e.backgroundColor.value.slice(5,7),16),0]),f=X(i,{duration:250,transition:[.25,.8,.25,1]}),v=o.computed(()=>{const[t,a,m,g]=f.value;return`rgba(${t}, ${a}, ${m}, ${g})`}),p=()=>{i.value=[parseInt(e.backgroundColor.value.slice(1,3),16),parseInt(e.backgroundColor.value.slice(3,5),16),parseInt(e.backgroundColor.value.slice(5,7),16),parseInt(e.backgroundColor.value.slice(7,9),16)/255]},l=()=>{i.value=[parseInt(e.backgroundColor.value.slice(1,3),16),parseInt(e.backgroundColor.value.slice(3,5),16),parseInt(e.backgroundColor.value.slice(5,7),16),0],setTimeout(()=>{r.value.isMouseDown=!1,s.value.isTouch=!1,document.documentElement.style.overflowY="auto",u.value=!1},250)};return o.watch(u,(t,a)=>{u.value&&p()}),o.onBeforeMount(async()=>{}),o.onMounted(async()=>{}),()=>{var t,a;return o.h("div",{class:"swipe-modal-takumaru-vue-swipe-modal"},[e.modelValue.value?o.h("div",{class:"modal-background",style:{backgroundColor:v.value},on:{click:()=>e.persistent.value?()=>null:l()},onClick:()=>{e.persistent.value||l()}}):null,e.modelValue.value?o.h("div",{class:"modal-contents",style:{backgroundColor:n.contentsColor,width:n.contentsWidth}},(a=(t=c.slots).default)==null?void 0:a.call(t)):null])}}});exports.default=A;exports.swipeModal=A;
+(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"),_;const Y=typeof window!="undefined",U=e=>typeof e=="function",E=e=>typeof e=="number",W=(e,i,a)=>Math.min(a,Math.max(i,e)),O=()=>{};Y&&((_=window==null?void 0:window.navigator)==null?void 0:_.userAgent)&&/iP(ad|hone|od)/.test(window.navigator.userAgent);function $(e){return e}function N(e){return o.getCurrentScope()?(o.onScopeDispose(e),!0):!1}function L(e,i,a={}){const{immediate:r=!0}=a,l=o.ref(!1);let u=null;function v(){u&&(clearTimeout(u),u=null)}function c(){l.value=!1,v()}function f(...p){v(),l.value=!0,u=setTimeout(()=>{l.value=!1,u=null,e(...p)},o.unref(i))}return r&&(l.value=!0,Y&&f()),N(c),{isPending:l,start:f,stop:c}}const G=Y?window:void 0,V=typeof globalThis!="undefined"?globalThis:typeof window!="undefined"?window:typeof global!="undefined"?global:typeof self!="undefined"?self:{},I="__vueuse_ssr_handlers__";V[I]=V[I]||{};V[I];function q(e,i={}){const{immediate:a=!0,window:r=G}=i,l=o.ref(!1);let u=null;function v(){!l.value||!r||(e(),u=r.requestAnimationFrame(v))}function c(){!l.value&&r&&(l.value=!0,v())}function f(){l.value=!1,u!=null&&r&&(r.cancelAnimationFrame(u),u=null)}return a&&c(),N(f),{isActive:l,pause:f,resume:c}}var B;(function(e){e.UP="UP",e.RIGHT="RIGHT",e.DOWN="DOWN",e.LEFT="LEFT",e.NONE="NONE"})(B||(B={}));function j([e,i,a,r]){const l=(n,s)=>1-3*s+3*n,u=(n,s)=>3*s-6*n,v=n=>3*n,c=(n,s,t)=>((l(s,t)*n+u(s,t))*n+v(s))*n,f=(n,s,t)=>3*l(s,t)*n*n+2*u(s,t)*n+v(s),p=n=>{let s=n;for(let t=0;t<4;++t){const h=f(s,e,a);if(h===0)return s;s-=(c(s,e,a)-n)/h}return s};return n=>e===i&&a===r?n:c(p(n),i,r)}function H(e,i={}){const{delay:a=0,disabled:r=!1,duration:l=1e3,onFinished:u=O,onStarted:v=O,transition:c=$}=i,f=o.computed(()=>{const d=o.unref(c);return U(d)?d:j(d)}),p=o.computed(()=>{const d=o.unref(e);return E(d)?d:d.map(o.unref)}),n=o.computed(()=>E(p.value)?[p.value]:p.value),s=o.ref(n.value.slice(0));let t,h,T,D,S;const{resume:R,pause:M}=q(()=>{const d=Date.now(),w=W(1-(T-d)/t,0,1);s.value=S.map((m,b)=>{var C;return m+((C=h[b])!=null?C:0)*f.value(w)}),w>=1&&(M(),u())},{immediate:!1}),y=()=>{M(),t=o.unref(l),h=s.value.map((d,w)=>{var m,b;return((m=n.value[w])!=null?m:0)-((b=s.value[w])!=null?b:0)}),S=s.value.slice(0),D=Date.now(),T=D+t,R(),v()},x=L(y,a,{immediate:!1});return o.watch(n,()=>{o.unref(r)?s.value=n.value.slice(0):o.unref(a)<=0?y():x.start()},{deep:!0}),o.computed(()=>{const d=o.unref(r)?n:s;return E(p.value)?d.value[0]:d.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 K(){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 P=e=>{if(e.indexOf("px")>0)return Number(e.slice(0,e.indexOf("px")));if(e.indexOf("vh")>0){const i=Number(e.slice(0,e.indexOf("vh")));return window.innerHeight*(i/100)}else if(e.indexOf("vw")>0){const i=Number(e.slice(0,e.indexOf("vw")));return window.innerWidth*(i/100)}else return 0};o.install();var F=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"],setup(e,i){const{mousePosition:a,initMousePosition:r,mouseDown:l,mouseMove:u,mouseUp:v}=K(),{touchPosition:c,initTouchPosition:f,touchStart:p,touchMove:n,touchEnd:s}=z(),t=o.toRefs(e),h=o.computed({get:()=>t.modelValue.value,set:g=>i.emit("update:modelValue",g)}),T=o.ref(250),D=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]),S=H(D,{duration:250,transition:[.25,.8,.25,1]}),R=o.computed(()=>{const[g,k,A,X]=S.value;return`rgba(${g}, ${k}, ${A}, ${X})`}),M=o.ref(-1*P(t.contentsHeight.value)),y=H(M,{duration:T.value,transition:[.25,.8,.25,1]}),x=o.computed(()=>y.value+(Math.abs(c.value.touchDistance)>Math.abs(a.value.mouseDistance)?c.value.touchDistance:a.value.mouseDistance)),d=()=>{document.documentElement.style.overflowY="auto",h.value=!1},w=()=>{M.value=0,D.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=()=>{M.value=-1*P(t.contentsHeight.value)-(Math.abs(c.value.touchDistance)>Math.abs(a.value.mouseDistance)?c.value.touchDistance:a.value.mouseDistance),D.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(()=>{r(),f(),d()},T.value)},b=()=>{s(),-1*c.value.touchDistance>P(t.contentsHeight.value)/8?m():c.value.touchDistance=0},C=()=>{v(),-1*a.value.mouseDistance>P(t.contentsHeight.value)/8?m():a.value.mouseDistance=0};return o.watch(h,(g,k)=>{h.value&&w()}),()=>{var g,k;return o.h("div",{class:"swipe-modal-takumaru-vue-swipe-modal",on:{mousemove:u,mouseup:C},onMousemove:u,onMouseup:C},[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:`${x.value}px`},on:{touchstart:p,touchmove:n,touchend:b},onTouchstart:p,onTouchmove:n,onTouchend:b},[t.noTip.value?null:o.h("div",{class:"modal-contents-chip-wrapper",on:{mousedown:l},onMousedown:l},o.h("div",{class:"modal-contents-chip",style:{"--tip-color":t.tipColor.value}})),(k=(g=i.slots).default)==null?void 0:k.call(g)]):null])}}});exports.default=F;exports.swipeModal=F;

dist/swipe-modal.es.js

@@ -1,2 +0,2 @@
-(function(){ try {var elementStyle = document.createElement('style'); elementStyle.appendChild(document.createTextNode(".hello{color:gray}:root{--contents-height: 30vh;--contents-bottom-position: 0%}.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;min-height:var(--contents-height);max-height:100vh;bottom:var(--contents-bottom-position);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)}.swipe-modal-takumaru-vue-swipe-modal .swipe-modal-background-enter,.swipe-modal-takumaru-vue-swipe-modal .swipe-modal-background-enter-from{opacity:0}.swipe-modal-takumaru-vue-swipe-modal .swipe-modal-background-enter-active{transition:all .2s ease-out}.swipe-modal-takumaru-vue-swipe-modal .swipe-modal-background-enter-to,.swipe-modal-takumaru-vue-swipe-modal .swipe-modal-background-leave,.swipe-modal-takumaru-vue-swipe-modal .swipe-modal-background-leave-from{opacity:1}.swipe-modal-takumaru-vue-swipe-modal .swipe-modal-background-leave-active{transition:all .2s ease-out}.swipe-modal-takumaru-vue-swipe-modal .swipe-modal-background-leave-to{opacity:0}.swipe-modal-takumaru-vue-swipe-modal .swipe-modal-contents-enter,.swipe-modal-takumaru-vue-swipe-modal .swipe-modal-contents-enter-from{bottom:calc(-1 * var(--contents-height))!important}.swipe-modal-takumaru-vue-swipe-modal .swipe-modal-contents-enter-active{transition:all .3s cubic-bezier(.25,.8,.25,1)}.swipe-modal-takumaru-vue-swipe-modal .swipe-modal-contents-enter-to,.swipe-modal-takumaru-vue-swipe-modal .swipe-modal-contents-leave,.swipe-modal-takumaru-vue-swipe-modal .swipe-modal-contents-leave-from{bottom:var(--contents-bottom-position)!important}.swipe-modal-takumaru-vue-swipe-modal .swipe-modal-contents-leave-active{transition:all .25s cubic-bezier(.25,.8,.25,1)}.swipe-modal-takumaru-vue-swipe-modal .swipe-modal-contents-leave-to{bottom:calc(-1 * var(--contents-height))!important}")); 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, onBeforeMount, onMounted, 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, h } from "vue-demi";
 var _a;
@@ -192,7 +192,38 @@ const isClient = typeof window !== "undefined";
     isTouch: false,
-    x: 0,
-    y: 0
+    touchStart: 0,
+    touchDistance: 0,
+    touchX: 0,
+    touchY: 0
   });
+  const initTouchPosition = () => {
+    touchPosition.value = {
+      isTouch: false,
+      touchStart: 0,
+      touchDistance: 0,
+      touchX: 0,
+      touchY: 0
+    };
+  };
+  const touchStart = (payload) => {
+    touchPosition.value.isTouch = true;
+    touchPosition.value.touchStart = payload.touches[0].pageY;
+  };
+  const touchMove = (payload) => {
+    if (touchPosition.value.isTouch) {
+      touchPosition.value.touchY = payload.touches[0].pageY;
+      touchPosition.value.touchDistance = touchPosition.value.touchStart - touchPosition.value.touchY;
+      if (touchPosition.value.touchDistance > 0) {
+        touchPosition.value.touchDistance = 0;
+      }
+    }
+  };
+  const touchEnd = () => {
+    touchPosition.value.isTouch = false;
+  };
   return {
-    touchPosition
+    touchPosition,
+    initTouchPosition,
+    touchStart,
+    touchMove,
+    touchEnd
   };
@@ -203,9 +234,56 @@ };
     isMouseDown: false,
-    x: 0,
-    y: 0
+    downStart: 0,
+    mouseDistance: 0,
+    mouseX: 0,
+    mouseY: 0
   });
+  const initMousePosition = () => {
+    mousePosition.value = {
+      isMouseDown: false,
+      downStart: 0,
+      mouseDistance: 0,
+      mouseX: 0,
+      mouseY: 0
+    };
+  };
+  const mouseDown = (payload) => {
+    mousePosition.value.isMouseDown = true;
+    mousePosition.value.downStart = payload.pageY;
+  };
+  const mouseMove = (payload) => {
+    if (mousePosition.value.isMouseDown) {
+      mousePosition.value.mouseY = payload.pageY;
+      mousePosition.value.mouseDistance = mousePosition.value.downStart - mousePosition.value.mouseY;
+      if (mousePosition.value.mouseDistance > 0) {
+        mousePosition.value.mouseDistance = 0;
+      }
+    }
+  };
+  const mouseUp = () => {
+    mousePosition.value.isMouseDown = false;
+  };
   return {
-    mousePosition
+    mousePosition,
+    initMousePosition,
+    mouseDown,
+    mouseMove,
+    mouseUp
   };
 }
+const toPixel = (payload) => {
+  if (payload.indexOf("px") > 0) {
+    const px = Number(payload.slice(0, payload.indexOf("px")));
+    return px;
+  } else if (payload.indexOf("vh") > 0) {
+    const vh = Number(payload.slice(0, payload.indexOf("vh")));
+    const px = window.innerHeight * (vh / 100);
+    return px;
+  } else if (payload.indexOf("vw") > 0) {
+    const vw = Number(payload.slice(0, payload.indexOf("vw")));
+    const px = window.innerWidth * (vw / 100);
+    return px;
+  } else {
+    return 0;
+  }
+};
 var swipeModal$1 = "";
@@ -280,6 +358,14 @@ install();
     const {
-      mousePosition
+      mousePosition,
+      initMousePosition,
+      mouseDown,
+      mouseMove,
+      mouseUp
     } = useMouseEvent();
     const {
-      touchPosition
+      touchPosition,
+      initTouchPosition,
+      touchStart,
+      touchMove,
+      touchEnd
     } = useTouchEvent();
@@ -291,2 +377,3 @@ const propsRef = toRefs(props);
     });
+    const contentsBottomPositionTransitionDuration = ref(250);
     const backgroundColor = ref([
@@ -306,3 +393,17 @@ parseInt(propsRef.backgroundColor.value.slice(1, 3), 16),
     });
+    const contentsBottomPosition = ref(-1 * toPixel(propsRef.contentsHeight.value));
+    const contentsBottomPositionTransition = useTransition(contentsBottomPosition, {
+      duration: contentsBottomPositionTransitionDuration.value,
+      transition: [0.25, 0.8, 0.25, 1]
+    });
+    const contentsBottomDistance = computed(() => {
+      const distance = contentsBottomPositionTransition.value + (Math.abs(touchPosition.value.touchDistance) > Math.abs(mousePosition.value.mouseDistance) ? touchPosition.value.touchDistance : mousePosition.value.mouseDistance);
+      return distance;
+    });
+    const init = () => {
+      document.documentElement.style.overflowY = "auto";
+      modal.value = false;
+    };
     const open = () => {
+      contentsBottomPosition.value = 0;
       backgroundColor.value = [
@@ -316,2 +417,3 @@ parseInt(propsRef.backgroundColor.value.slice(1, 3), 16),
     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);
       backgroundColor.value = [
@@ -324,8 +426,23 @@ parseInt(propsRef.backgroundColor.value.slice(1, 3), 16),
       setTimeout(() => {
-        mousePosition.value.isMouseDown = false;
-        touchPosition.value.isTouch = false;
-        document.documentElement.style.overflowY = "auto";
-        modal.value = false;
-      }, 250);
+        initMousePosition();
+        initTouchPosition();
+        init();
+      }, contentsBottomPositionTransitionDuration.value);
     };
+    const onTouchEnd = () => {
+      touchEnd();
+      if (-1 * touchPosition.value.touchDistance > toPixel(propsRef.contentsHeight.value) / 8) {
+        close();
+      } else {
+        touchPosition.value.touchDistance = 0;
+      }
+    };
+    const onMouseUp = () => {
+      mouseUp();
+      if (-1 * mousePosition.value.mouseDistance > toPixel(propsRef.contentsHeight.value) / 8) {
+        close();
+      } else {
+        mousePosition.value.mouseDistance = 0;
+      }
+    };
     watch(modal, (newVal, oldVal) => {
@@ -336,10 +453,12 @@ if (modal.value) {
     });
-    onBeforeMount(async () => {
-    });
-    onMounted(async () => {
-    });
     return () => {
       var _a2, _b;
       return h("div", {
-        class: "swipe-modal-takumaru-vue-swipe-modal"
+        class: "swipe-modal-takumaru-vue-swipe-modal",
+        on: {
+          mousemove: mouseMove,
+          mouseup: onMouseUp
+        },
+        onMousemove: mouseMove,
+        onMouseup: onMouseUp
       }, [
@@ -352,4 +471,8 @@ propsRef.modelValue.value ? h("div", {
           on: {
+            onMouseup: () => propsRef.persistent.value ? () => null : close(),
             click: () => propsRef.persistent.value ? () => null : close()
           },
+          onMouseup: () => {
+            propsRef.persistent.value ? () => null : close();
+          },
           onClick: () => {
@@ -362,6 +485,33 @@ propsRef.persistent.value ? () => null : close();
           style: {
-            backgroundColor: props.contentsColor,
-            width: props.contentsWidth
-          }
-        }, (_b = (_a2 = context.slots).default) == null ? void 0 : _b.call(_a2)) : null
+            width: propsRef.contentsWidth.value,
+            minHeight: propsRef.contentsHeight.value,
+            borderTopLeftRadius: propsRef.borderTopRadius.value ? propsRef.borderTopRadius.value : propsRef.borderTopLeftRadius.value,
+            borderTopRightRadius: propsRef.borderTopRadius ? propsRef.borderTopRadius.value : propsRef.borderTopRightRadius.value,
+            backgroundColor: propsRef.dark.value ? propsRef.darkContentsColor.value : propsRef.contentsColor.value,
+            color: propsRef.dark.value ? "white" : "black",
+            bottom: `${contentsBottomDistance.value}px`
+          },
+          on: {
+            touchstart: touchStart,
+            touchmove: touchMove,
+            touchend: onTouchEnd
+          },
+          onTouchstart: touchStart,
+          onTouchmove: touchMove,
+          onTouchend: onTouchEnd
+        }, [
+          !propsRef.noTip.value ? h("div", {
+            class: "modal-contents-chip-wrapper",
+            on: {
+              mousedown: mouseDown
+            },
+            onMousedown: mouseDown
+          }, h("div", {
+            class: "modal-contents-chip",
+            style: {
+              "--tip-color": propsRef.tipColor.value
+            }
+          })) : null,
+          (_b = (_a2 = context.slots).default) == null ? void 0 : _b.call(_a2)
+        ]) : null
       ]);
@@ -368,0 +518,0 @@ };

dist/swipe-modal.umd.js

@@ -1,2 +0,2 @@
-(function(){ try {var elementStyle = document.createElement('style'); elementStyle.appendChild(document.createTextNode(".hello{color:gray}:root{--contents-height: 30vh;--contents-bottom-position: 0%}.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;min-height:var(--contents-height);max-height:100vh;bottom:var(--contents-bottom-position);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)}.swipe-modal-takumaru-vue-swipe-modal .swipe-modal-background-enter,.swipe-modal-takumaru-vue-swipe-modal .swipe-modal-background-enter-from{opacity:0}.swipe-modal-takumaru-vue-swipe-modal .swipe-modal-background-enter-active{transition:all .2s ease-out}.swipe-modal-takumaru-vue-swipe-modal .swipe-modal-background-enter-to,.swipe-modal-takumaru-vue-swipe-modal .swipe-modal-background-leave,.swipe-modal-takumaru-vue-swipe-modal .swipe-modal-background-leave-from{opacity:1}.swipe-modal-takumaru-vue-swipe-modal .swipe-modal-background-leave-active{transition:all .2s ease-out}.swipe-modal-takumaru-vue-swipe-modal .swipe-modal-background-leave-to{opacity:0}.swipe-modal-takumaru-vue-swipe-modal .swipe-modal-contents-enter,.swipe-modal-takumaru-vue-swipe-modal .swipe-modal-contents-enter-from{bottom:calc(-1 * var(--contents-height))!important}.swipe-modal-takumaru-vue-swipe-modal .swipe-modal-contents-enter-active{transition:all .3s cubic-bezier(.25,.8,.25,1)}.swipe-modal-takumaru-vue-swipe-modal .swipe-modal-contents-enter-to,.swipe-modal-takumaru-vue-swipe-modal .swipe-modal-contents-leave,.swipe-modal-takumaru-vue-swipe-modal .swipe-modal-contents-leave-from{bottom:var(--contents-bottom-position)!important}.swipe-modal-takumaru-vue-swipe-modal .swipe-modal-contents-leave-active{transition:all .25s cubic-bezier(.25,.8,.25,1)}.swipe-modal-takumaru-vue-swipe-modal .swipe-modal-contents-leave-to{bottom:calc(-1 * var(--contents-height))!important}")); document.head.appendChild(elementStyle);} catch(e) {console.error('vite-plugin-css-injected-by-js', e);} })();var __vite_style__=document.createElement("style");__vite_style__.innerHTML=`.hello{color:gray}:root{--contents-height: 30vh;--contents-bottom-position: 0%}.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;min-height:var(--contents-height);max-height:100vh;bottom:var(--contents-bottom-position);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)}.swipe-modal-takumaru-vue-swipe-modal .swipe-modal-background-enter,.swipe-modal-takumaru-vue-swipe-modal .swipe-modal-background-enter-from{opacity:0}.swipe-modal-takumaru-vue-swipe-modal .swipe-modal-background-enter-active{transition:all .2s ease-out}.swipe-modal-takumaru-vue-swipe-modal .swipe-modal-background-enter-to,.swipe-modal-takumaru-vue-swipe-modal .swipe-modal-background-leave,.swipe-modal-takumaru-vue-swipe-modal .swipe-modal-background-leave-from{opacity:1}.swipe-modal-takumaru-vue-swipe-modal .swipe-modal-background-leave-active{transition:all .2s ease-out}.swipe-modal-takumaru-vue-swipe-modal .swipe-modal-background-leave-to{opacity:0}.swipe-modal-takumaru-vue-swipe-modal .swipe-modal-contents-enter,.swipe-modal-takumaru-vue-swipe-modal .swipe-modal-contents-enter-from{bottom:calc(-1 * var(--contents-height))!important}.swipe-modal-takumaru-vue-swipe-modal .swipe-modal-contents-enter-active{transition:all .3s cubic-bezier(.25,.8,.25,1)}.swipe-modal-takumaru-vue-swipe-modal .swipe-modal-contents-enter-to,.swipe-modal-takumaru-vue-swipe-modal .swipe-modal-contents-leave,.swipe-modal-takumaru-vue-swipe-modal .swipe-modal-contents-leave-from{bottom:var(--contents-bottom-position)!important}.swipe-modal-takumaru-vue-swipe-modal .swipe-modal-contents-leave-active{transition:all .25s cubic-bezier(.25,.8,.25,1)}.swipe-modal-takumaru-vue-swipe-modal .swipe-modal-contents-leave-to{bottom:calc(-1 * var(--contents-height))!important}
-(function(w,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue-demi")):typeof define=="function"&&define.amd?define(["exports","vue-demi"],e):(w=typeof globalThis!="undefined"?globalThis:w||self,e(w.swipeModal={},w.vueDemi))})(this,function(w,e){"use strict";`;document.head.appendChild(__vite_style__);var _;const y=typeof window!="undefined",A=a=>typeof a=="function",T=a=>typeof a=="number",B=(a,d,r)=>Math.min(r,Math.max(d,a)),V=()=>{};y&&((_=window==null?void 0:window.navigator)==null?void 0:_.userAgent)&&/iP(ad|hone|od)/.test(window.navigator.userAgent);function N(a){return a}function M(a){return e.getCurrentScope()?(e.onScopeDispose(a),!0):!1}function O(a,d,r={}){const{immediate:i=!0}=r,t=e.ref(!1);let l=null;function u(){l&&(clearTimeout(l),l=null)}function p(){t.value=!1,u()}function m(...f){u(),t.value=!0,l=setTimeout(()=>{t.value=!1,l=null,a(...f)},e.unref(d))}return i&&(t.value=!0,y&&m()),M(p),{isPending:t,start:m,stop:p}}const W=y?window:void 0,C=typeof globalThis!="undefined"?globalThis:typeof window!="undefined"?window:typeof global!="undefined"?global:typeof self!="undefined"?self:{},x="__vueuse_ssr_handlers__";C[x]=C[x]||{},C[x];function $(a,d={}){const{immediate:r=!0,window:i=W}=d,t=e.ref(!1);let l=null;function u(){!t.value||!i||(a(),l=i.requestAnimationFrame(u))}function p(){!t.value&&i&&(t.value=!0,u())}function m(){t.value=!1,l!=null&&i&&(i.cancelAnimationFrame(l),l=null)}return r&&p(),M(m),{isActive:t,pause:m,resume:p}}var S;(function(a){a.UP="UP",a.RIGHT="RIGHT",a.DOWN="DOWN",a.LEFT="LEFT",a.NONE="NONE"})(S||(S={}));function j([a,d,r,i]){const t=(n,o)=>1-3*o+3*n,l=(n,o)=>3*o-6*n,u=n=>3*n,p=(n,o,s)=>((t(o,s)*n+l(o,s))*n+u(o))*n,m=(n,o,s)=>3*t(o,s)*n*n+2*l(o,s)*n+u(o),f=n=>{let o=n;for(let s=0;s<4;++s){const v=m(o,a,r);if(v===0)return o;o-=(p(o,a,r)-n)/v}return o};return n=>a===d&&r===i?n:p(f(n),d,i)}function H(a,d={}){const{delay:r=0,disabled:i=!1,duration:t=1e3,onFinished:l=V,onStarted:u=V,transition:p=N}=d,m=e.computed(()=>{const c=e.unref(p);return A(c)?c:j(c)}),f=e.computed(()=>{const c=e.unref(a);return T(c)?c:c.map(e.unref)}),n=e.computed(()=>T(f.value)?[f.value]:f.value),o=e.ref(n.value.slice(0));let s,v,g,I,P;const{resume:X,pause:F}=$(()=>{const c=Date.now(),b=B(1-(g-c)/s,0,1);o.value=P.map((h,k)=>{var z;return h+((z=v[k])!=null?z:0)*m.value(b)}),b>=1&&(F(),l())},{immediate:!1}),R=()=>{F(),s=e.unref(t),v=o.value.map((c,b)=>{var h,k;return((h=n.value[b])!=null?h:0)-((k=o.value[b])!=null?k:0)}),P=o.value.slice(0),I=Date.now(),g=I+s,X(),u()},q=O(R,r,{immediate:!1});return e.watch(n,()=>{e.unref(i)?o.value=n.value.slice(0):e.unref(r)<=0?R():q.start()},{deep:!0}),e.computed(()=>{const c=e.unref(i)?n:o;return T(f.value)?c.value[0]:c.value})}const L=()=>({touchPosition:e.ref({isTouch:!1,x:0,y:0})});function G(){return{mousePosition:e.ref({isMouseDown:!1,x:0,y:0})}}var U="";e.install();var E=e.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"],setup(a,d){const{mousePosition:r}=G(),{touchPosition:i}=L(),t=e.toRefs(a),l=e.computed({get:()=>t.modelValue.value,set:o=>d.emit("update:modelValue",o)}),u=e.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=H(u,{duration:250,transition:[.25,.8,.25,1]}),m=e.computed(()=>{const[o,s,v,g]=p.value;return`rgba(${o}, ${s}, ${v}, ${g})`}),f=()=>{u.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]},n=()=>{u.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(()=>{r.value.isMouseDown=!1,i.value.isTouch=!1,document.documentElement.style.overflowY="auto",l.value=!1},250)};return e.watch(l,(o,s)=>{l.value&&f()}),e.onBeforeMount(async()=>{}),e.onMounted(async()=>{}),()=>{var o,s;return e.h("div",{class:"swipe-modal-takumaru-vue-swipe-modal"},[t.modelValue.value?e.h("div",{class:"modal-background",style:{backgroundColor:m.value},on:{click:()=>t.persistent.value?()=>null:n()},onClick:()=>{t.persistent.value||n()}}):null,t.modelValue.value?e.h("div",{class:"modal-contents",style:{backgroundColor:a.contentsColor,width:a.contentsWidth}},(s=(o=d.slots).default)==null?void 0:s.call(o)):null])}}});w.default=E,w.swipeModal=E,Object.defineProperties(w,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(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 _=typeof window!="undefined",z=e=>typeof e=="function",E=e=>typeof e=="number",L=(e,i,a)=>Math.min(a,Math.max(i,e)),B=()=>{};_&&((H=window==null?void 0:window.navigator)==null?void 0:H.userAgent)&&/iP(ad|hone|od)/.test(window.navigator.userAgent);function U(e){return e}function N(e){return o.getCurrentScope()?(o.onScopeDispose(e),!0):!1}function W(e,i,a={}){const{immediate:r=!0}=a,l=o.ref(!1);let s=null;function p(){s&&(clearTimeout(s),s=null)}function c(){l.value=!1,p()}function f(...v){p(),l.value=!0,s=setTimeout(()=>{l.value=!1,s=null,e(...v)},o.unref(i))}return r&&(l.value=!0,_&&f()),N(c),{isPending:l,start:f,stop:c}}const $=_?window:void 0,V=typeof globalThis!="undefined"?globalThis:typeof window!="undefined"?window:typeof global!="undefined"?global:typeof self!="undefined"?self:{},Y="__vueuse_ssr_handlers__";V[Y]=V[Y]||{},V[Y];function j(e,i={}){const{immediate:a=!0,window:r=$}=i,l=o.ref(!1);let s=null;function p(){!l.value||!r||(e(),s=r.requestAnimationFrame(p))}function c(){!l.value&&r&&(l.value=!0,p())}function f(){l.value=!1,s!=null&&r&&(r.cancelAnimationFrame(s),s=null)}return a&&c(),N(f),{isActive:l,pause:f,resume:c}}var F;(function(e){e.UP="UP",e.RIGHT="RIGHT",e.DOWN="DOWN",e.LEFT="LEFT",e.NONE="NONE"})(F||(F={}));function D([e,i,a,r]){const l=(n,u)=>1-3*u+3*n,s=(n,u)=>3*u-6*n,p=n=>3*n,c=(n,u,t)=>((l(u,t)*n+s(u,t))*n+p(u))*n,f=(n,u,t)=>3*l(u,t)*n*n+2*s(u,t)*n+p(u),v=n=>{let u=n;for(let t=0;t<4;++t){const m=f(u,e,a);if(m===0)return u;u-=(c(u,e,a)-n)/m}return u};return n=>e===i&&a===r?n:c(v(n),i,r)}function A(e,i={}){const{delay:a=0,disabled:r=!1,duration:l=1e3,onFinished:s=B,onStarted:p=B,transition:c=U}=i,f=o.computed(()=>{const d=o.unref(c);return z(d)?d:D(d)}),v=o.computed(()=>{const d=o.unref(e);return E(d)?d:d.map(o.unref)}),n=o.computed(()=>E(v.value)?[v.value]:v.value),u=o.ref(n.value.slice(0));let t,m,k,x,P;const{resume:I,pause:M}=j(()=>{const d=Date.now(),b=L(1-(k-d)/t,0,1);u.value=P.map((h,T)=>{var y;return h+((y=m[T])!=null?y:0)*f.value(b)}),b>=1&&(M(),s())},{immediate:!1}),R=()=>{M(),t=o.unref(l),m=u.value.map((d,b)=>{var h,T;return((h=n.value[b])!=null?h:0)-((T=u.value[b])!=null?T:0)}),P=u.value.slice(0),x=Date.now(),k=x+t,I(),p()},O=W(R,a,{immediate:!1});return o.watch(n,()=>{o.unref(r)?u.value=n.value.slice(0):o.unref(a)<=0?R():O.start()},{deep:!0}),o.computed(()=>{const d=o.unref(r)?n:u;return E(v.value)?d.value[0]:d.value})}const G=()=>{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: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 q(){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: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=>{if(e.indexOf("px")>0)return Number(e.slice(0,e.indexOf("px")));if(e.indexOf("vh")>0){const i=Number(e.slice(0,e.indexOf("vh")));return window.innerHeight*(i/100)}else if(e.indexOf("vw")>0){const i=Number(e.slice(0,e.indexOf("vw")));return window.innerWidth*(i/100)}else return 0};var Q="";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"],setup(e,i){const{mousePosition:a,initMousePosition:r,mouseDown:l,mouseMove:s,mouseUp:p}=q(),{touchPosition:c,initTouchPosition:f,touchStart:v,touchMove:n,touchEnd:u}=G(),t=o.toRefs(e),m=o.computed({get:()=>t.modelValue.value,set:g=>i.emit("update:modelValue",g)}),k=o.ref(250),x=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=A(x,{duration:250,transition:[.25,.8,.25,1]}),I=o.computed(()=>{const[g,C,K,J]=P.value;return`rgba(${g}, ${C}, ${K}, ${J})`}),M=o.ref(-1*S(t.contentsHeight.value)),R=A(M,{duration:k.value,transition:[.25,.8,.25,1]}),O=o.computed(()=>R.value+(Math.abs(c.value.touchDistance)>Math.abs(a.value.mouseDistance)?c.value.touchDistance:a.value.mouseDistance)),d=()=>{document.documentElement.style.overflowY="auto",m.value=!1},b=()=>{M.value=0,x.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=()=>{M.value=-1*S(t.contentsHeight.value)-(Math.abs(c.value.touchDistance)>Math.abs(a.value.mouseDistance)?c.value.touchDistance:a.value.mouseDistance),x.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(()=>{r(),f(),d()},k.value)},T=()=>{u(),-1*c.value.touchDistance>S(t.contentsHeight.value)/8?h():c.value.touchDistance=0},y=()=>{p(),-1*a.value.mouseDistance>S(t.contentsHeight.value)/8?h():a.value.mouseDistance=0};return o.watch(m,(g,C)=>{m.value&&b()}),()=>{var g,C;return o.h("div",{class:"swipe-modal-takumaru-vue-swipe-modal",on:{mousemove:s,mouseup:y},onMousemove:s,onMouseup:y},[t.modelValue.value?o.h("div",{class:"modal-background",style:{backgroundColor:I.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:`${O.value}px`},on:{touchstart:v,touchmove:n,touchend:T},onTouchstart:v,onTouchmove:n,onTouchend:T},[t.noTip.value?null:o.h("div",{class:"modal-contents-chip-wrapper",on:{mousedown:l},onMousedown:l},o.h("div",{class:"modal-contents-chip",style:{"--tip-color":t.tipColor.value}})),(C=(g=i.slots).default)==null?void 0:C.call(g)]):null])}}});w.default=X,w.swipeModal=X,Object.defineProperties(w,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package.json

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

README.md

 # @takuma-ru/vue-swpie-modal
 
+![featureGraphic](https://user-images.githubusercontent.com/49429291/182005490-2e0631ca-8271-48e6-9282-25df81ba0f8f.png)
+
 ## Description
@@ -4,0 +6,0 @@ Modal window that can be swiped to close.（Swipeable Bottom Sheet）

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

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

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

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

40641

increased by10.51%

Lines of code

590

increased by32.58%

Number of lines in readme file

150

increased by1.35%

No dependency changes