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

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

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 r=require("vue-demi");const p=t=>t?Object.entries(t).reduce((o,[e,s])=>(e=e.charAt(0).toUpperCase()+e.slice(1),e=`on${e}`,{...o,[e]:s}),{}):null,d=(t,o={},e)=>{if(r.isVue2)return r.h(t,o,e);const{props:s,domProps:n,on:i,...a}=o;let l=p(i);const c={...a,...s,...n,...l};return r.h(t,c,e)};function v(){return{touchPosition:r.ref({isActive:!1,x:0,y:0})}}var u=r.defineComponent({name:"swipeModal",props:{},setup(t,o){return v(),()=>d("h1",{class:"hello"},"Hi"+r.isVue2?"vue2.x":"vue3.x")}});exports.default=u;exports.swipeModal=u;
+(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;

dist/swipe-modal.es.js

@@ -1,22 +0,5 @@
-(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 { isVue2, h as h$1, ref, defineComponent } from "vue-demi";
-const adaptOnsV3 = (ons) => {
-  if (!ons)
-    return null;
-  return Object.entries(ons).reduce((ret, [key, handler]) => {
-    key = key.charAt(0).toUpperCase() + key.slice(1);
-    key = `on${key}`;
-    return { ...ret, [key]: handler };
-  }, {});
-};
-const h = (type, options = {}, chidren) => {
-  if (isVue2)
-    return h$1(type, options, chidren);
-  const { props, domProps, on, ...extraOptions } = options;
-  let ons = adaptOnsV3(on);
-  const params = { ...extraOptions, ...props, ...domProps, ...ons };
-  return h$1(type, params, chidren);
-};
+(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() {
   const touchPosition = ref({
-    isActive: false,
+    isTouch: false,
     x: 0,
@@ -29,11 +12,145 @@ y: 0
 }
+function useMouseEvent() {
+  const mousePosition = ref({
+    isMouseDown: false,
+    x: 0,
+    y: 0
+  });
+  return {
+    mousePosition
+  };
+}
 var swipeModal$1 = "";
 var swipeModal = defineComponent({
   name: "swipeModal",
-  props: {},
-  setup(props, ctx) {
-    useTouchEvent();
-    return () => h("h1", { class: "hello" }, "Hi" + isVue2 ? "vue2.x" : "vue3.x");
+  model: {
+    prop: "modelValue",
+    event: "update:modelValue"
+  },
+  props: {
+    modelValue: {
+      type: Boolean,
+      default: false
+    },
+    dark: {
+      type: Boolean,
+      default: false
+    },
+    persistent: {
+      type: Boolean,
+      default: false
+    },
+    backgroundColor: {
+      type: String,
+      default: "#80808080"
+    },
+    fullscreen: {
+      type: Boolean,
+      default: false
+    },
+    noTip: {
+      type: Boolean,
+      default: false
+    },
+    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(props, context) {
+    const {
+      mousePosition
+    } = useMouseEvent();
+    const {
+      touchPosition
+    } = useTouchEvent();
+    const propsRef = toRefs(props);
+    const close = () => {
+      mousePosition.value.isMouseDown = false;
+      touchPosition.value.isTouch = false;
+      document.documentElement.style.overflowY = "auto";
+      context.emit("update:modelValue", 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;
+      };
+    }
   }
 });
 export { swipeModal as default, swipeModal };

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(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__);const l=a=>a?Object.entries(a).reduce((i,[o,s])=>(o=o.charAt(0).toUpperCase()+o.slice(1),o=`on${o}`,{...i,[o]:s}),{}):null,r=(a,i={},o)=>{if(e.isVue2)return e.h(a,i,o);const{props:s,domProps:p,on:m,...u}=i;let c=l(m);const w={...u,...s,...p,...c};return e.h(a,w,o)};function d(){return{touchPosition:e.ref({isActive:!1,x:0,y:0})}}var v="",n=e.defineComponent({name:"swipeModal",props:{},setup(a,i){return d(),()=>r("h1",{class:"hello"},"Hi"+e.isVue2?"vue2.x":"vue3.x")}});t.default=n,t.swipeModal=n,Object.defineProperties(t,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(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"}})});

package.json

 {
   "name": "@takuma-ru/vue-swipe-modal",
-  "version": "4.0.0-alpha.5",
+  "version": "4.0.0-alpha.6",
   "private": false,
@@ -55,6 +55,9 @@ "description": "Swipeable Bottom Sheet library for vue2 and vue3",
   "dependencies": {
+    "animejs": "^3.2.1",
     "vue-demi": "^0.13.4"
   },
   "devDependencies": {
+    "@types/animejs": "^3.1.5",
     "@vitejs/plugin-vue": "^2.3.3",
+    "@vue/composition-api": "^1.7.0",
     "sass": "^1.53.0",
@@ -66,4 +69,4 @@ "sass-loader": "^13.0.2",
     "vue": "^3.2.25",
-    "vue2": "npm:vue@^2.6.0",
-    "vue-tsc": "^0.34.7"
+    "vue-tsc": "^0.34.7",
+    "vue2": "npm:vue@^2.6.0"
   },
@@ -70,0 +73,0 @@ "peerDependencies": {

README.md

@@ -6,84 +6,118 @@ # @takuma-ru/vue-swpie-modal
 
-## Warning!
-When using this library, please install<br>
-vue3.x -> More than "3.2.0" and less than "4"<br>
-vue2.x -> More than "2.2.0" and less than "3"<br>
-<br>
-Any version less than that may not work properly.
-
 ## DEMO
-[vue2-demo-link](https://vue-swipe-modal-vue2.vercel.app)
+[demo-link](https://vue-swipe-modal-vue2.vercel.app)
 
 ## Getting Started
-1. Install
-- for Vue3
-  ```md
-  yarn add @takuma-ru/vue-swipe-modal@^3.2.0
-  ```
+#### 1. Install
+```powershell
+yarn add @takuma-ru/vue-swipe-modal@^4.0.0
+```
 
-- for Vue2
-  ```md
-  yarn add @takuma-ru/vue-swipe-modal@^2.2.0
+#### 2. Come on, let's use it.
+<details>
+  <summary>Vue 3.x  /  Vue 2.7</summary>
+
+  ```vue
+  <template>
+    <div>
+      <button @click="modal = true">open</button>
+
+      <swipe-modal
+        v-model="modal"
+        contents-height="50vh"
+        border-top-radius="16px"
+      >
+        <h1>contents</h1>
+      </swipe-modal>
+    </div>
+  </template>
+
+  <script lang="ts" setup>
+  import { ref } from 'vue'
+  import swipeModal from '@takuma-ru/vue-swipe-modal'
+
+  const modal = ref(false)
+  </script>
   ```
+</details>
 
-2. Come on, let's use it.
-```vue
-<!-- for Vue3 -->
-<template>
-  <div>
-    <button @click="modal = true">open</button>
+<details>
+  <summary>Vue 2.6 or lower (Composition API)</summary>
 
-    <swipe-modal
-      v-model="modal"
-      contents-height="50vh"
-      border-top-radius="16px"
-    >
-      <h1>contents</h1>
-    </swipe-modal>
-  </div>
-</template>
+  ```vue
+  <template>
+    <div>
+      <button @click="modal = true">open</button>
 
-<script lang="ts" setup>
-import { ref } from 'vue'
-import { swipeModal } from '@takuma-ru/vue-swipe-modal'
+      <swipe-modal
+        v-model="modal"
+        contents-height="50vh"
+        border-top-radius="16px"
+      >
+        <h1>contents</h1>
+      </swipe-modal>
+    </div>
+  </template>
 
-const modal = ref(false)
-</script>
-```
+  <script lang="ts">
+  import { defineComponent, ref, reactive } from '@vue/composition-api';
+  import { swipeModal } from '@takuma-ru/vue-swipe-modal'
 
-```vue
-<!-- for Vue2 -->
-<template>
-  <div>
-    <button @click="modal = true">open</button>
+  export default defineComponent({
+    components: {
+      swipeModal,
+    },
+    setup () {
+      const modal = ref<boolean>(false)
 
-    <swipe-modal
-      v-model="modal"
-      contents-height="50vh"
-      border-top-radius="16px"
-    >
-      <h1>contents</h1>
-    </swipe-modal>
-  </div>
-</template>
+      return {
+        modal,
+      }
+    }
+  })
+  </script>
+  ```
 
-<script lang="ts">
-import { defineComponent, ref, reactive } from '@vue/composition-api';
-import { swipeModal } from '@takuma-ru/vue-swipe-modal'
+</details>
 
-export default defineComponent({
-  components: {
-    swipeModal,
-  },
-  setup () {
-    const modal = ref<boolean>(false)
+<details>
+  <summary>Nuxt 2.x</summary>
 
-    return {
-      modal,
+  ```vue
+  <!-- for Vue2 -->
+  <template>
+    <div>
+      <button @click="modal = true">open</button>
+
+      <swipe-modal
+        v-model="modal"
+        contents-height="50vh"
+        border-top-radius="16px"
+      >
+        <h1>contents</h1>
+      </swipe-modal>
+    </div>
+  </template>
+
+  <script lang="ts">
+  import { defineComponent, ref, reactive } from '@vue/composition-api';
+  import { swipeModal } from '@takuma-ru/vue-swipe-modal'
+
+  export default defineComponent({
+    components: {
+      swipeModal,
+    },
+    setup () {
+      const modal = ref<boolean>(false)
+
+      return {
+        modal,
+      }
     }
-  }
-})
-</script>
-```
+  })
+  </script>
+  ```
 
+</details>
+
 ## Props
@@ -90,0 +124,0 @@

types/components/swipe-modal.d.ts

 import '../components/swipe-modal.scss';
-declare const _default: import("vue-demi").DefineComponent<Readonly<import("vue-demi").ComponentPropsOptions<{
-    [x: string]: unknown;
-}>>, () => import("vue-demi").VNode<import("vue-demi").RendererNode, import("vue-demi").RendererElement, {
+declare const _default: import("vue-demi").DefineComponent<{
+    modelValue: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    dark: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    persistent: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    backgroundColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    fullscreen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    noTip: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    contentsWidth: {
+        type: StringConstructor;
+        default: string;
+    };
+    contentsHeight: {
+        type: StringConstructor;
+        default: string;
+    };
+    borderTopRadius: {
+        type: StringConstructor;
+        default: null;
+    };
+    borderTopLeftRadius: {
+        type: StringConstructor;
+        default: string;
+    };
+    borderTopRightRadius: {
+        type: StringConstructor;
+        default: string;
+    };
+    contentsColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    tipColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    darkContentsColor: {
+        type: StringConstructor;
+        default: string;
+    };
+}, () => import("vue-demi").VNode<import("vue-demi").RendererNode, import("vue-demi").RendererElement, {
     [key: string]: any;
-}>, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, Record<string, any>, string, import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, readonly string[] | Readonly<import("vue-demi").ExtractPropTypes<Readonly<import("vue-demi").ComponentObjectPropsOptions<{
-    [x: string]: unknown;
-}>>>>, {
-    [x: number]: string;
-} | {}>;
+}> | null, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    modelValue: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    dark: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    persistent: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    backgroundColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    fullscreen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    noTip: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    contentsWidth: {
+        type: StringConstructor;
+        default: string;
+    };
+    contentsHeight: {
+        type: StringConstructor;
+        default: string;
+    };
+    borderTopRadius: {
+        type: StringConstructor;
+        default: null;
+    };
+    borderTopLeftRadius: {
+        type: StringConstructor;
+        default: string;
+    };
+    borderTopRightRadius: {
+        type: StringConstructor;
+        default: string;
+    };
+    contentsColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    tipColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    darkContentsColor: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    modelValue: boolean;
+    dark: boolean;
+    persistent: boolean;
+    backgroundColor: string;
+    fullscreen: boolean;
+    noTip: boolean;
+    contentsWidth: string;
+    contentsHeight: string;
+    borderTopRadius: string;
+    borderTopLeftRadius: string;
+    borderTopRightRadius: string;
+    contentsColor: string;
+    tipColor: string;
+    darkContentsColor: string;
+}>;
 export default _default;
 //# sourceMappingURL=swipe-modal.d.ts.map

types/composables/mouseEvent.d.ts

@@ -1,2 +0,8 @@
-export declare function useMouseEvent(): void;
+export declare function useMouseEvent(): {
+    mousePosition: import("vue-demi").Ref<{
+        isMouseDown: boolean;
+        x: number;
+        y: number;
+    }>;
+};
 //# sourceMappingURL=mouseEvent.d.ts.map

types/composables/touchEvent.d.ts

 export declare function useTouchEvent(): {
     touchPosition: import("vue-demi").Ref<{
-        isActive: boolean;
+        isTouch: boolean;
         x: number;
@@ -5,0 +5,0 @@ y: number;

types/scripts/h-demi.d.ts

@@ -1,12 +0,3 @@
-interface Options {
-    props?: Object;
-    domProps?: Object;
-    on?: Object;
-}
-declare const h: (type: String | Object, options?: Options & any, chidren?: any) => import("vue-demi").VNode<import("vue-demi").RendererNode, import("vue-demi").RendererElement, {
-    [key: string]: any;
-}>;
 declare const slot: (s: (arg0: any) => any, attrs?: any) => any;
 export { slot };
-export default h;
 //# sourceMappingURL=h-demi.d.ts.map

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

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

49156

increased by126.65%

Number of package files

17

increased by13.33%

Lines of code

1026

increased by734.15%

Number of lines in readme file

148

increased by29.82%

Published versions last year

11

increased by10%

Worsened metrics

Dependency count

4

increased by33.33%

Dev dependency count

11

increased by22.22%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedanimejs@^3.2.1

• + Addedanimejs@3.2.2(transitive)

• + Addedpostcss@8.4.48(transitive)

• - Removedpostcss@8.4.49(transitive)