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

Comparing version 4.0.0-alpha.6 to 4.0.0-alpha.7

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 e=require("vue-demi");function r(){return{touchPosition:e.ref({isTouch:!1,x:0,y:0})}}function c(){return{mousePosition:e.ref({isMouseDown:!1,x:0,y:0})}}var n=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(o,s){const{mousePosition:d}=c(),{touchPosition:i}=r(),a=e.toRefs(o),u=()=>{d.value.isMouseDown=!1,i.value.isTouch=!1,document.documentElement.style.overflowY="auto",s.emit("update:modelValue",!1)};return console.log(e.isVue2),e.isVue2?()=>{var t,l;return a.modelValue.value?e.h("div",{class:"swipe-modal-takumaru-vue-swipe-modal"},[e.h("div",{class:"modal-background",style:{backgroundColor:o.backgroundColor},on:{click:a.persistent.value?()=>{}:u()}}),e.h("div",{class:"modal-contents",style:{backgroundColor:o.contentsColor,width:o.contentsWidth}},(l=(t=s.slots).default)==null?void 0:l.call(t))]):null}:()=>{var t,l;return a.modelValue.value?e.h("div",{class:"swipe-modal-takumaru-vue-swipe-modal"},[e.h("div",{class:"modal-background",style:{backgroundColor:o.backgroundColor},onClick:()=>{a.persistent.value||u()}}),e.h("div",{class:"modal-contents",style:{backgroundColor:o.contentsColor,width:o.contentsWidth}},(l=(t=s.slots).default)==null?void 0:l.call(t))]):null}}});exports.default=n;exports.swipeModal=n;
+(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 t=require("vue-demi"),k;const I=typeof window!="undefined",W=e=>typeof e=="function",h=e=>typeof e=="number",$=(e,a,r)=>Math.min(r,Math.max(a,e)),P=()=>{},T=(e,a)=>(e=Math.ceil(e),a=Math.floor(a),Math.floor(Math.random()*(a-e+1))+e);I&&((k=window==null?void 0:window.navigator)==null?void 0:k.userAgent)&&/iP(ad|hone|od)/.test(window.navigator.userAgent);function Q(e){return e}function R(e){return t.getCurrentScope()?(t.onScopeDispose(e),!0):!1}function x(e,a,r={}){const{immediate:i=!0}=r,u=t.ref(!1);let l=null;function f(){l&&(clearTimeout(l),l=null)}function p(){u.value=!1,f()}function v(...c){f(),u.value=!0,l=setTimeout(()=>{u.value=!1,l=null,e(...c)},t.unref(a))}return i&&(u.value=!0,I&&v()),R(p),{isPending:u,start:v,stop:p}}const G=I?window:void 0,O=typeof globalThis!="undefined"?globalThis:typeof window!="undefined"?window:typeof global!="undefined"?global:typeof self!="undefined"?self:{},C="__vueuse_ssr_handlers__";O[C]=O[C]||{};O[C];function H(e,a={}){const{immediate:r=!0,window:i=G}=a,u=t.ref(!1);let l=null;function f(){!u.value||!i||(e(),l=i.requestAnimationFrame(f))}function p(){!u.value&&i&&(u.value=!0,f())}function v(){u.value=!1,l!=null&&i&&(i.cancelAnimationFrame(l),l=null)}return r&&p(),R(v),{isActive:u,pause:v,resume:p}}var B;(function(e){e.UP="UP",e.RIGHT="RIGHT",e.DOWN="DOWN",e.LEFT="LEFT",e.NONE="NONE"})(B||(B={}));const L={linear:Q,easeInSine:[.12,0,.39,0],easeOutSine:[.61,1,.88,1],easeInOutSine:[.37,0,.63,1],easeInQuad:[.11,0,.5,0],easeOutQuad:[.5,1,.89,1],easeInOutQuad:[.45,0,.55,1],easeInCubic:[.32,0,.67,0],easeOutCubic:[.33,1,.68,1],easeInOutCubic:[.65,0,.35,1],easeInQuart:[.5,0,.75,0],easeOutQuart:[.25,1,.5,1],easeInOutQuart:[.76,0,.24,1],easeInQuint:[.64,0,.78,0],easeOutQuint:[.22,1,.36,1],easeInOutQuint:[.83,0,.17,1],easeInExpo:[.7,0,.84,0],easeOutExpo:[.16,1,.3,1],easeInOutExpo:[.87,0,.13,1],easeInCirc:[.55,0,1,.45],easeOutCirc:[0,.55,.45,1],easeInOutCirc:[.85,0,.15,1],easeInBack:[.36,0,.66,-.56],easeOutBack:[.34,1.56,.64,1],easeInOutBack:[.68,-.6,.32,1.6]};function X([e,a,r,i]){const u=(o,n)=>1-3*n+3*o,l=(o,n)=>3*n-6*o,f=o=>3*o,p=(o,n,s)=>((u(n,s)*o+l(n,s))*o+f(n))*o,v=(o,n,s)=>3*u(n,s)*o*o+2*l(n,s)*o+f(n),c=o=>{let n=o;for(let s=0;s<4;++s){const m=v(n,e,r);if(m===0)return n;n-=(p(n,e,r)-o)/m}return n};return o=>e===a&&r===i?o:p(c(o),a,i)}function F(e,a={}){const{delay:r=0,disabled:i=!1,duration:u=1e3,onFinished:l=P,onStarted:f=P,transition:p=Q}=a,v=t.computed(()=>{const d=t.unref(p);return W(d)?d:X(d)}),c=t.computed(()=>{const d=t.unref(e);return h(d)?d:d.map(t.unref)}),o=t.computed(()=>h(c.value)?[c.value]:c.value),n=t.ref(o.value.slice(0));let s,m,g,M,S;const{resume:A,pause:V}=H(()=>{const d=Date.now(),y=$(1-(g-d)/s,0,1);n.value=S.map((w,b)=>{var _;return w+((_=m[b])!=null?_:0)*v.value(y)}),y>=1&&(V(),l())},{immediate:!1}),E=()=>{V(),s=t.unref(u),m=n.value.map((d,y)=>{var w,b;return((w=o.value[y])!=null?w:0)-((b=n.value[y])!=null?b:0)}),S=n.value.slice(0),M=Date.now(),g=M+s,A(),f()},D=x(E,r,{immediate:!1});return t.watch(o,()=>{t.unref(i)?n.value=o.value.slice(0):t.unref(r)<=0?E():D.start()},{deep:!0}),t.computed(()=>{const d=t.unref(i)?o:n;return h(c.value)?d.value[0]:d.value})}const q=()=>({touchPosition:t.ref({isTouch:!1,x:0,y:0})});function U(){return{mousePosition:t.ref({isMouseDown:!1,x:0,y:0})}}t.install();var N=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"],setup(e,a){const r=t.ref(0);F(r,{duration:1e3,transition:[.75,0,.25,1]});const i=t.ref([0,0,0]),u=F(i,{duration:500,transition:L.easeInCubic}),l=t.computed(()=>{const[s,m,g]=u.value;return`rgb(${s},${m},${g})`}),f=()=>{r.value=r.value===100?0:100,i.value=[T(0,255),T(0,255),T(0,255)]},{mousePosition:p}=U(),{touchPosition:v}=q(),c=t.toRefs(e),o=()=>{f()},n=()=>{p.value.isMouseDown=!1,v.value.isTouch=!1,document.documentElement.style.overflowY="auto",a.emit("update:modelValue",!1)};return t.watch(c.modelValue,()=>{console.log(c.modelValue.value),c.modelValue.value?o():n()}),t.onBeforeMount(async()=>{}),t.onMounted(async()=>{console.log("mounted")}),()=>{var s,m;return t.h("div",{class:"swipe-modal-takumaru-vue-swipe-modal"},[c.modelValue.value?t.h("div",{class:"modal-background",style:{backgroundColor:l.value},on:{click:()=>c.persistent.value?()=>null:n()},onClick:()=>{c.persistent.value||n()}}):null,c.modelValue.value?t.h("div",{class:"modal-contents",style:{backgroundColor:e.contentsColor,width:e.contentsWidth}},(m=(s=a.slots).default)==null?void 0:m.call(s)):null])}}});exports.default=N;exports.swipeModal=N;

dist/swipe-modal.es.js

@@ -1,3 +0,222 @@
-(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, defineComponent, toRefs, isVue2, h } from "vue-demi";
-function useTouchEvent() {
+(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";
+var _a;
+const isClient = typeof window !== "undefined";
+const isFunction = (val) => typeof val === "function";
+const isNumber = (val) => typeof val === "number";
+const clamp = (n, min, max) => Math.min(max, Math.max(min, n));
+const noop = () => {
+};
+const rand = (min, max) => {
+  min = Math.ceil(min);
+  max = Math.floor(max);
+  return Math.floor(Math.random() * (max - min + 1)) + min;
+};
+isClient && ((_a = window == null ? void 0 : window.navigator) == null ? void 0 : _a.userAgent) && /iP(ad|hone|od)/.test(window.navigator.userAgent);
+function identity(arg) {
+  return arg;
+}
+function tryOnScopeDispose(fn) {
+  if (getCurrentScope()) {
+    onScopeDispose(fn);
+    return true;
+  }
+  return false;
+}
+function useTimeoutFn(cb, interval, options = {}) {
+  const {
+    immediate = true
+  } = options;
+  const isPending = ref(false);
+  let timer = null;
+  function clear() {
+    if (timer) {
+      clearTimeout(timer);
+      timer = null;
+    }
+  }
+  function stop() {
+    isPending.value = false;
+    clear();
+  }
+  function start(...args) {
+    clear();
+    isPending.value = true;
+    timer = setTimeout(() => {
+      isPending.value = false;
+      timer = null;
+      cb(...args);
+    }, unref(interval));
+  }
+  if (immediate) {
+    isPending.value = true;
+    if (isClient)
+      start();
+  }
+  tryOnScopeDispose(stop);
+  return {
+    isPending,
+    start,
+    stop
+  };
+}
+const defaultWindow = isClient ? window : void 0;
+const _global = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
+const globalKey = "__vueuse_ssr_handlers__";
+_global[globalKey] = _global[globalKey] || {};
+_global[globalKey];
+function useRafFn(fn, options = {}) {
+  const {
+    immediate = true,
+    window: window2 = defaultWindow
+  } = options;
+  const isActive = ref(false);
+  let rafId = null;
+  function loop() {
+    if (!isActive.value || !window2)
+      return;
+    fn();
+    rafId = window2.requestAnimationFrame(loop);
+  }
+  function resume() {
+    if (!isActive.value && window2) {
+      isActive.value = true;
+      loop();
+    }
+  }
+  function pause() {
+    isActive.value = false;
+    if (rafId != null && window2) {
+      window2.cancelAnimationFrame(rafId);
+      rafId = null;
+    }
+  }
+  if (immediate)
+    resume();
+  tryOnScopeDispose(pause);
+  return {
+    isActive,
+    pause,
+    resume
+  };
+}
+var SwipeDirection;
+(function(SwipeDirection2) {
+  SwipeDirection2["UP"] = "UP";
+  SwipeDirection2["RIGHT"] = "RIGHT";
+  SwipeDirection2["DOWN"] = "DOWN";
+  SwipeDirection2["LEFT"] = "LEFT";
+  SwipeDirection2["NONE"] = "NONE";
+})(SwipeDirection || (SwipeDirection = {}));
+const TransitionPresets = {
+  linear: identity,
+  easeInSine: [0.12, 0, 0.39, 0],
+  easeOutSine: [0.61, 1, 0.88, 1],
+  easeInOutSine: [0.37, 0, 0.63, 1],
+  easeInQuad: [0.11, 0, 0.5, 0],
+  easeOutQuad: [0.5, 1, 0.89, 1],
+  easeInOutQuad: [0.45, 0, 0.55, 1],
+  easeInCubic: [0.32, 0, 0.67, 0],
+  easeOutCubic: [0.33, 1, 0.68, 1],
+  easeInOutCubic: [0.65, 0, 0.35, 1],
+  easeInQuart: [0.5, 0, 0.75, 0],
+  easeOutQuart: [0.25, 1, 0.5, 1],
+  easeInOutQuart: [0.76, 0, 0.24, 1],
+  easeInQuint: [0.64, 0, 0.78, 0],
+  easeOutQuint: [0.22, 1, 0.36, 1],
+  easeInOutQuint: [0.83, 0, 0.17, 1],
+  easeInExpo: [0.7, 0, 0.84, 0],
+  easeOutExpo: [0.16, 1, 0.3, 1],
+  easeInOutExpo: [0.87, 0, 0.13, 1],
+  easeInCirc: [0.55, 0, 1, 0.45],
+  easeOutCirc: [0, 0.55, 0.45, 1],
+  easeInOutCirc: [0.85, 0, 0.15, 1],
+  easeInBack: [0.36, 0, 0.66, -0.56],
+  easeOutBack: [0.34, 1.56, 0.64, 1],
+  easeInOutBack: [0.68, -0.6, 0.32, 1.6]
+};
+function createEasingFunction([p0, p1, p2, p3]) {
+  const a = (a1, a2) => 1 - 3 * a2 + 3 * a1;
+  const b = (a1, a2) => 3 * a2 - 6 * a1;
+  const c = (a1) => 3 * a1;
+  const calcBezier = (t, a1, a2) => ((a(a1, a2) * t + b(a1, a2)) * t + c(a1)) * t;
+  const getSlope = (t, a1, a2) => 3 * a(a1, a2) * t * t + 2 * b(a1, a2) * t + c(a1);
+  const getTforX = (x) => {
+    let aGuessT = x;
+    for (let i = 0; i < 4; ++i) {
+      const currentSlope = getSlope(aGuessT, p0, p2);
+      if (currentSlope === 0)
+        return aGuessT;
+      const currentX = calcBezier(aGuessT, p0, p2) - x;
+      aGuessT -= currentX / currentSlope;
+    }
+    return aGuessT;
+  };
+  return (x) => p0 === p1 && p2 === p3 ? x : calcBezier(getTforX(x), p1, p3);
+}
+function useTransition(source, options = {}) {
+  const {
+    delay = 0,
+    disabled = false,
+    duration = 1e3,
+    onFinished = noop,
+    onStarted = noop,
+    transition = identity
+  } = options;
+  const currentTransition = computed(() => {
+    const t = unref(transition);
+    return isFunction(t) ? t : createEasingFunction(t);
+  });
+  const sourceValue = computed(() => {
+    const s = unref(source);
+    return isNumber(s) ? s : s.map(unref);
+  });
+  const sourceVector = computed(() => isNumber(sourceValue.value) ? [sourceValue.value] : sourceValue.value);
+  const outputVector = ref(sourceVector.value.slice(0));
+  let currentDuration;
+  let diffVector;
+  let endAt;
+  let startAt;
+  let startVector;
+  const { resume, pause } = useRafFn(() => {
+    const now = Date.now();
+    const progress = clamp(1 - (endAt - now) / currentDuration, 0, 1);
+    outputVector.value = startVector.map((val, i) => {
+      var _a2;
+      return val + ((_a2 = diffVector[i]) != null ? _a2 : 0) * currentTransition.value(progress);
+    });
+    if (progress >= 1) {
+      pause();
+      onFinished();
+    }
+  }, { immediate: false });
+  const start = () => {
+    pause();
+    currentDuration = unref(duration);
+    diffVector = outputVector.value.map((n, i) => {
+      var _a2, _b;
+      return ((_a2 = sourceVector.value[i]) != null ? _a2 : 0) - ((_b = outputVector.value[i]) != null ? _b : 0);
+    });
+    startVector = outputVector.value.slice(0);
+    startAt = Date.now();
+    endAt = startAt + currentDuration;
+    resume();
+    onStarted();
+  };
+  const timeout = useTimeoutFn(start, delay, { immediate: false });
+  watch(sourceVector, () => {
+    if (unref(disabled)) {
+      outputVector.value = sourceVector.value.slice(0);
+    } else {
+      if (unref(delay) <= 0)
+        start();
+      else
+        timeout.start();
+    }
+  }, { deep: true });
+  return computed(() => {
+    const targetVector = unref(disabled) ? sourceVector : outputVector;
+    return isNumber(sourceValue.value) ? targetVector.value[0] : targetVector.value;
+  });
+}
+const useTouchEvent = () => {
   const touchPosition = ref({
@@ -11,3 +230,3 @@ isTouch: false,
   };
-}
+};
 function useMouseEvent() {
@@ -24,2 +243,3 @@ const mousePosition = ref({
 var swipeModal$1 = "";
+install();
 var swipeModal = defineComponent({
@@ -91,2 +311,20 @@ name: "swipeModal",
   setup(props, context) {
+    const baseNumber = ref(0);
+    useTransition(baseNumber, {
+      duration: 1e3,
+      transition: [0.75, 0, 0.25, 1]
+    });
+    const baseColor = ref([0, 0, 0]);
+    const colorTransition = useTransition(baseColor, {
+      duration: 500,
+      transition: TransitionPresets.easeInCubic
+    });
+    const color = computed(() => {
+      const [r, g, b] = colorTransition.value;
+      return `rgb(${r},${g},${b})`;
+    });
+    const toggle = () => {
+      baseNumber.value = baseNumber.value === 100 ? 0 : 100;
+      baseColor.value = [rand(0, 255), rand(0, 255), rand(0, 255)];
+    };
     const {
@@ -99,2 +337,5 @@ mousePosition
     const propsRef = toRefs(props);
+    const open = () => {
+      toggle();
+    };
     const close = () => {
@@ -106,55 +347,43 @@ mousePosition.value.isMouseDown = false;
     };
-    console.log(isVue2);
-    if (isVue2) {
-      return () => {
-        var _a, _b;
-        return propsRef.modelValue.value ? h("div", {
-          class: "swipe-modal-takumaru-vue-swipe-modal"
-        }, [
-          h("div", {
-            class: "modal-background",
-            style: {
-              backgroundColor: props.backgroundColor
-            },
-            on: {
-              click: propsRef.persistent.value ? () => {
-              } : close()
-            }
-          }),
-          h("div", {
-            class: "modal-contents",
-            style: {
-              backgroundColor: props.contentsColor,
-              width: props.contentsWidth
-            }
-          }, (_b = (_a = context.slots).default) == null ? void 0 : _b.call(_a))
-        ]) : null;
-      };
-    } else {
-      return () => {
-        var _a, _b;
-        return propsRef.modelValue.value ? h("div", {
-          class: "swipe-modal-takumaru-vue-swipe-modal"
-        }, [
-          h("div", {
-            class: "modal-background",
-            style: {
-              backgroundColor: props.backgroundColor
-            },
-            onClick: () => {
-              propsRef.persistent.value ? () => null : close();
-            }
-          }),
-          h("div", {
-            class: "modal-contents",
-            style: {
-              backgroundColor: props.contentsColor,
-              width: props.contentsWidth
-            }
-          }, (_b = (_a = context.slots).default) == null ? void 0 : _b.call(_a))
-        ]) : null;
-      };
-    }
+    watch(propsRef.modelValue, () => {
+      console.log(propsRef.modelValue.value);
+      if (propsRef.modelValue.value) {
+        open();
+      } else {
+        close();
+      }
+    });
+    onBeforeMount(async () => {
+    });
+    onMounted(async () => {
+      console.log("mounted");
+    });
+    return () => {
+      var _a2, _b;
+      return h("div", {
+        class: "swipe-modal-takumaru-vue-swipe-modal"
+      }, [
+        propsRef.modelValue.value ? h("div", {
+          class: "modal-background",
+          style: {
+            backgroundColor: color.value
+          },
+          on: {
+            click: () => propsRef.persistent.value ? () => null : close()
+          },
+          onClick: () => {
+            propsRef.persistent.value ? () => null : close();
+          }
+        }) : null,
+        propsRef.modelValue.value ? h("div", {
+          class: "modal-contents",
+          style: {
+            backgroundColor: props.contentsColor,
+            width: props.contentsWidth
+          }
+        }, (_b = (_a2 = context.slots).default) == null ? void 0 : _b.call(_a2)) : null
+      ]);
+    };
   }
 });
 export { swipeModal as default, swipeModal };

dist/swipe-modal.umd.js

 (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(t,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue-demi")):typeof define=="function"&&define.amd?define(["exports","vue-demi"],e):(t=typeof globalThis!="undefined"?globalThis:t||self,e(t.swipeModal={},t.vueDemi))})(this,function(t,e){"use strict";`;document.head.appendChild(__vite_style__);function u(){return{touchPosition:e.ref({isTouch:!1,x:0,y:0})}}function r(){return{mousePosition:e.ref({isMouseDown:!1,x:0,y:0})}}var c="",n=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(o,s){const{mousePosition:p}=r(),{touchPosition:m}=u(),i=e.toRefs(o),d=()=>{p.value.isMouseDown=!1,m.value.isTouch=!1,document.documentElement.style.overflowY="auto",s.emit("update:modelValue",!1)};return console.log(e.isVue2),e.isVue2?()=>{var a,l;return i.modelValue.value?e.h("div",{class:"swipe-modal-takumaru-vue-swipe-modal"},[e.h("div",{class:"modal-background",style:{backgroundColor:o.backgroundColor},on:{click:i.persistent.value?()=>{}:d()}}),e.h("div",{class:"modal-contents",style:{backgroundColor:o.contentsColor,width:o.contentsWidth}},(l=(a=s.slots).default)==null?void 0:l.call(a))]):null}:()=>{var a,l;return i.modelValue.value?e.h("div",{class:"swipe-modal-takumaru-vue-swipe-modal"},[e.h("div",{class:"modal-background",style:{backgroundColor:o.backgroundColor},onClick:()=>{i.persistent.value||d()}}),e.h("div",{class:"modal-contents",style:{backgroundColor:o.contentsColor,width:o.contentsWidth}},(l=(a=s.slots).default)==null?void 0:l.call(a))]):null}}});t.default=n,t.swipeModal=n,Object.defineProperties(t,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(v,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue-demi")):typeof define=="function"&&define.amd?define(["exports","vue-demi"],e):(v=typeof globalThis!="undefined"?globalThis:v||self,e(v.swipeModal={},v.vueDemi))})(this,function(v,e){"use strict";`;document.head.appendChild(__vite_style__);var I;const y=typeof window!="undefined",N=t=>typeof t=="function",T=t=>typeof t=="number",A=(t,s,i)=>Math.min(i,Math.max(s,t)),M=()=>{},x=(t,s)=>(t=Math.ceil(t),s=Math.floor(s),Math.floor(Math.random()*(s-t+1))+t);y&&((I=window==null?void 0:window.navigator)==null?void 0:I.userAgent)&&/iP(ad|hone|od)/.test(window.navigator.userAgent);function _(t){return t}function S(t){return e.getCurrentScope()?(e.onScopeDispose(t),!0):!1}function W(t,s,i={}){const{immediate:r=!0}=i,a=e.ref(!1);let l=null;function p(){l&&(clearTimeout(l),l=null)}function m(){a.value=!1,p()}function f(...d){p(),a.value=!0,l=setTimeout(()=>{a.value=!1,l=null,t(...d)},e.unref(s))}return r&&(a.value=!0,y&&f()),S(m),{isPending:a,start:f,stop:m}}const j=y?window:void 0,O=typeof globalThis!="undefined"?globalThis:typeof window!="undefined"?window:typeof global!="undefined"?global:typeof self!="undefined"?self:{},C="__vueuse_ssr_handlers__";O[C]=O[C]||{},O[C];function H(t,s={}){const{immediate:i=!0,window:r=j}=s,a=e.ref(!1);let l=null;function p(){!a.value||!r||(t(),l=r.requestAnimationFrame(p))}function m(){!a.value&&r&&(a.value=!0,p())}function f(){a.value=!1,l!=null&&r&&(r.cancelAnimationFrame(l),l=null)}return i&&m(),S(f),{isActive:a,pause:f,resume:m}}var V;(function(t){t.UP="UP",t.RIGHT="RIGHT",t.DOWN="DOWN",t.LEFT="LEFT",t.NONE="NONE"})(V||(V={}));const L={linear:_,easeInSine:[.12,0,.39,0],easeOutSine:[.61,1,.88,1],easeInOutSine:[.37,0,.63,1],easeInQuad:[.11,0,.5,0],easeOutQuad:[.5,1,.89,1],easeInOutQuad:[.45,0,.55,1],easeInCubic:[.32,0,.67,0],easeOutCubic:[.33,1,.68,1],easeInOutCubic:[.65,0,.35,1],easeInQuart:[.5,0,.75,0],easeOutQuart:[.25,1,.5,1],easeInOutQuart:[.76,0,.24,1],easeInQuint:[.64,0,.78,0],easeOutQuint:[.22,1,.36,1],easeInOutQuint:[.83,0,.17,1],easeInExpo:[.7,0,.84,0],easeOutExpo:[.16,1,.3,1],easeInOutExpo:[.87,0,.13,1],easeInCirc:[.55,0,1,.45],easeOutCirc:[0,.55,.45,1],easeInOutCirc:[.85,0,.15,1],easeInBack:[.36,0,.66,-.56],easeOutBack:[.34,1.56,.64,1],easeInOutBack:[.68,-.6,.32,1.6]};function $([t,s,i,r]){const a=(n,o)=>1-3*o+3*n,l=(n,o)=>3*o-6*n,p=n=>3*n,m=(n,o,u)=>((a(o,u)*n+l(o,u))*n+p(o))*n,f=(n,o,u)=>3*a(o,u)*n*n+2*l(o,u)*n+p(o),d=n=>{let o=n;for(let u=0;u<4;++u){const w=f(o,t,i);if(w===0)return o;o-=(m(o,t,i)-n)/w}return o};return n=>t===s&&i===r?n:m(d(n),s,r)}function E(t,s={}){const{delay:i=0,disabled:r=!1,duration:a=1e3,onFinished:l=M,onStarted:p=M,transition:m=_}=s,f=e.computed(()=>{const c=e.unref(m);return N(c)?c:$(c)}),d=e.computed(()=>{const c=e.unref(t);return T(c)?c:c.map(e.unref)}),n=e.computed(()=>T(d.value)?[d.value]:d.value),o=e.ref(n.value.slice(0));let u,w,h,B,F;const{resume:q,pause:Q}=H(()=>{const c=Date.now(),g=A(1-(h-c)/u,0,1);o.value=F.map((b,k)=>{var z;return b+((z=w[k])!=null?z:0)*f.value(g)}),g>=1&&(Q(),l())},{immediate:!1}),R=()=>{Q(),u=e.unref(a),w=o.value.map((c,g)=>{var b,k;return((b=n.value[g])!=null?b:0)-((k=o.value[g])!=null?k:0)}),F=o.value.slice(0),B=Date.now(),h=B+u,q(),p()},U=W(R,i,{immediate:!1});return e.watch(n,()=>{e.unref(r)?o.value=n.value.slice(0):e.unref(i)<=0?R():U.start()},{deep:!0}),e.computed(()=>{const c=e.unref(r)?n:o;return T(d.value)?c.value[0]:c.value})}const G=()=>({touchPosition:e.ref({isTouch:!1,x:0,y:0})});function X(){return{mousePosition:e.ref({isMouseDown:!1,x:0,y:0})}}var Y="";e.install();var P=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(t,s){const i=e.ref(0);E(i,{duration:1e3,transition:[.75,0,.25,1]});const r=e.ref([0,0,0]),a=E(r,{duration:500,transition:L.easeInCubic}),l=e.computed(()=>{const[u,w,h]=a.value;return`rgb(${u},${w},${h})`}),p=()=>{i.value=i.value===100?0:100,r.value=[x(0,255),x(0,255),x(0,255)]},{mousePosition:m}=X(),{touchPosition:f}=G(),d=e.toRefs(t),n=()=>{p()},o=()=>{m.value.isMouseDown=!1,f.value.isTouch=!1,document.documentElement.style.overflowY="auto",s.emit("update:modelValue",!1)};return e.watch(d.modelValue,()=>{console.log(d.modelValue.value),d.modelValue.value?n():o()}),e.onBeforeMount(async()=>{}),e.onMounted(async()=>{console.log("mounted")}),()=>{var u,w;return e.h("div",{class:"swipe-modal-takumaru-vue-swipe-modal"},[d.modelValue.value?e.h("div",{class:"modal-background",style:{backgroundColor:l.value},on:{click:()=>d.persistent.value?()=>null:o()},onClick:()=>{d.persistent.value||o()}}):null,d.modelValue.value?e.h("div",{class:"modal-contents",style:{backgroundColor:t.contentsColor,width:t.contentsWidth}},(w=(u=s.slots).default)==null?void 0:w.call(u)):null])}}});v.default=P,v.swipeModal=P,Object.defineProperties(v,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package.json

 {
   "name": "@takuma-ru/vue-swipe-modal",
-  "version": "4.0.0-alpha.6",
+  "version": "4.0.0-alpha.7",
   "private": false,
@@ -48,3 +48,3 @@ "description": "Swipeable Bottom Sheet library for vue2 and vue3",
     "dev": "vite",
-    "build": "vue-tsc && vite build",
+    "build": "yarn switch:3 && vue-tsc && vite build",
     "publish:lib": "yarn build && npm publish --access=public",
@@ -56,7 +56,6 @@ "switch:2": "vue-demi-switch 2 vue2",
   "dependencies": {
-    "animejs": "^3.2.1",
+    "@vueuse/core": "8.9.4",
     "vue-demi": "^0.13.4"
   },
   "devDependencies": {
-    "@types/animejs": "^3.1.5",
     "@vitejs/plugin-vue": "^2.3.3",
@@ -63,0 +62,0 @@ "@vue/composition-api": "^1.7.0",

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

10

decreased by-9.09%

Worsened metrics

Total package byte prevSize

38012

decreased by-22.67%

Number of package files

5

decreased by-70.59%

Lines of code

471

decreased by-54.09%

Dependency changes

• + Added@vueuse/core@8.9.4

• + Added@types/web-bluetooth@0.0.14(transitive)

• + Added@vueuse/core@8.9.4(transitive)

• + Added@vueuse/metadata@8.9.4(transitive)

• + Added@vueuse/shared@8.9.4(transitive)

• - Removedanimejs@^3.2.1

• - Removedanimejs@3.2.2(transitive)