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

Comparing version 3.2.2 to 3.2.3

dist/swipe-modal.esm.js

@@ -99,3 +99,3 @@ import {defineComponent,toRefs,ref,computed,watch,onMounted,openBlock,createElementBlock,createVNode,Transition,withCtx,normalizeStyle,createCommentVNode,createElementVNode,renderSlot}from'vue';var script = defineComponent({
     watch(() => propsRef.modelValue.value, newModal => {
-      if (newModal) {
+      if (newModal.valueOf()) {
         open();
@@ -295,11 +295,8 @@ }
   install.installed = true;
-  Vue.component('swipeModal', script); // Vuetifyのように、どこからでもこのコンポーネントを呼び出せるようにする
-}; // Vue.use() のためのモジュール定義を作成
-// Create module definition for Vue.use()
+  Vue.component('swipeModal', script);
+};
 
-
 const plugin = {
   install
-}; // vue が見つかった場合に自動インストールする (ブラウザで <script> タグを用いた場合等)
-
+};
 let GlobalVue = null;
@@ -306,0 +303,0 @@

dist/swipe-modal.min.js

@@ -1,1 +0,1 @@
-var SwipeModal=function(e,t){"use strict";var o=t.defineComponent({name:"swipe-modal",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:function(e,o){var n=t.toRefs(e),a=t.ref(!1),l=t.ref(!1),u=t.ref(null),i=t.ref(0),r=t.ref("0px"),d=t.ref(0),s=t.ref(0),p=t.computed({get:function(){return n.modelValue.value},set:function(e){return o.emit("update:modelValue",e)}}),c=t.computed((function(){return{width:n.contentsWidth.value,borderTopLeftRadius:n.borderTopRadius.value?n.borderTopRadius.value:n.borderTopLeftRadius.value,borderTopRightRadius:n.borderTopRadius?n.borderTopRadius.value:n.borderTopRightRadius.value,backgroundColor:n.dark.value?n.darkContentsColor.value:n.contentsColor.value,color:n.dark.value?"white":"black"}}));t.watch((function(){return n.modelValue.value}),(function(e){e&&m()}));var m=function(){a.value=!1,l.value=!1,u.value=null,i.value=0,r.value="0px",d.value=0,s.value=0,document.documentElement.style.setProperty("--contents-height",n.fullscreen.value?"100%":i.value>0?i.value+"px":n.contentsHeight.value),document.documentElement.style.setProperty("--contents-bottom-position",r.value?r.value:"0px"),document.documentElement.style.overflowY="hidden"},v=function(){a.value=!1,l.value=!1,document.documentElement.style.overflowY="auto",o.emit("update:modelValue",!1)};return t.onMounted((function(){})),{propsRef:n,modal:p,modalHeight:i,contentsBottomPosition:r,styles:c,close:v,mouseDown:function(e){u.value=document.querySelector(".modal-contents"),i.value=u.value.getBoundingClientRect().height,d.value=e.pageY,a.value=!0},mouseMove:function(e){a.value&&(s.value=e.pageY,r.value=(d.value-s.value<=0?d.value-s.value:0)+"px"),document.documentElement.style.setProperty("--contents-bottom-position",r.value?r.value:"0px")},mouseUp:function(){a.value=!1,-1*(d.value-s.value)>i.value*(1/8)?v():r.value="0px"},touchStart:function(e){u.value=document.querySelector(".modal-contents"),i.value=u.value.getBoundingClientRect().height,u.value.scrollTop<=0&&(d.value=e.touches[0].pageY,l.value=!0)},touchMove:function(e){l.value&&(s.value=e.touches[0].pageY,d.value-s.value<=0?r.value=d.value-s.value+"px":r.value="0px",r.value=(d.value-s.value<=0?d.value-s.value:0)+"px"),document.documentElement.style.setProperty("--contents-bottom-position",r.value?r.value:"0px")},touchEnd:function(){l.value=!1,-1*(d.value-s.value)>i.value*(1/8)?v():r.value="0px"}}}});!function(e,t){void 0===t&&(t={});var o=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===o&&n.firstChild?n.insertBefore(a,n.firstChild):n.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}(":root {\n  --contents-height: 30vh;\n  --contents-bottom-position: 0%;\n}\n\n#swipe-modal-takumaru-vue-swipe-modal {\n  position: fixed;\n  scrollbar-width: none;\n  z-index: 15;\n}\n#swipe-modal-takumaru-vue-swipe-modal .modal-background {\n  position: fixed;\n  z-index: 11;\n  width: 100vw;\n  height: 100vh;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n#swipe-modal-takumaru-vue-swipe-modal .modal-contents {\n  position: fixed;\n  z-index: 12;\n  min-height: var(--contents-height);\n  max-height: 100vh;\n  bottom: var(--contents-bottom-position);\n  left: 50%;\n  transform: translateX(-50%) translateY(0%);\n  overflow-y: scroll;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  backface-visibility: hidden;\n  -webkit-backface-visibility: hidden;\n  filter: drop-shadow(0px 16px 40px rgba(0, 37, 80, 0.2));\n}\n#swipe-modal-takumaru-vue-swipe-modal .modal-contents::-webkit-scrollbar {\n  width: 0px;\n}\n#swipe-modal-takumaru-vue-swipe-modal .modal-contents-chip-wrapper {\n  z-index: 12;\n  display: flex;\n  justify-items: center;\n  align-items: center;\n  justify-content: center;\n  align-content: center;\n  position: relative;\n  top: 0px;\n  height: 4px;\n  width: 100%;\n  padding-top: 8px;\n  padding-bottom: 8px;\n  cursor: s-resize;\n}\n#swipe-modal-takumaru-vue-swipe-modal .modal-contents-chip {\n  --tip-color: #c8c8c8;\n  width: 40px;\n  height: 100%;\n  border-radius: 4px;\n  background-color: var(--tip-color);\n}\n#swipe-modal-takumaru-vue-swipe-modal .swipe-modal-background-enter {\n  opacity: 0;\n}\n#swipe-modal-takumaru-vue-swipe-modal .swipe-modal-background-enter-from {\n  opacity: 0;\n}\n#swipe-modal-takumaru-vue-swipe-modal .swipe-modal-background-enter-active {\n  transition: all 0.2s ease-out;\n}\n#swipe-modal-takumaru-vue-swipe-modal .swipe-modal-background-enter-to {\n  opacity: 1;\n}\n#swipe-modal-takumaru-vue-swipe-modal .swipe-modal-background-leave {\n  opacity: 1;\n}\n#swipe-modal-takumaru-vue-swipe-modal .swipe-modal-background-leave-from {\n  opacity: 1;\n}\n#swipe-modal-takumaru-vue-swipe-modal .swipe-modal-background-leave-active {\n  transition: all 0.2s ease-out;\n}\n#swipe-modal-takumaru-vue-swipe-modal .swipe-modal-background-leave-to {\n  opacity: 0;\n}\n#swipe-modal-takumaru-vue-swipe-modal .swipe-modal-contents-enter {\n  bottom: calc(-1 * var(--contents-height)) !important;\n}\n#swipe-modal-takumaru-vue-swipe-modal .swipe-modal-contents-enter-from {\n  bottom: calc(-1 * var(--contents-height)) !important;\n}\n#swipe-modal-takumaru-vue-swipe-modal .swipe-modal-contents-enter-active {\n  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);\n}\n#swipe-modal-takumaru-vue-swipe-modal .swipe-modal-contents-enter-to {\n  bottom: var(--contents-bottom-position) !important;\n}\n#swipe-modal-takumaru-vue-swipe-modal .swipe-modal-contents-leave {\n  bottom: var(--contents-bottom-position) !important;\n}\n#swipe-modal-takumaru-vue-swipe-modal .swipe-modal-contents-leave-from {\n  bottom: var(--contents-bottom-position) !important;\n}\n#swipe-modal-takumaru-vue-swipe-modal .swipe-modal-contents-leave-active {\n  transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);\n}\n#swipe-modal-takumaru-vue-swipe-modal .swipe-modal-contents-leave-to {\n  bottom: calc(-1 * var(--contents-height)) !important;\n}"),o.render=function(e,o,n,a,l,u){return t.openBlock(),t.createElementBlock("div",{id:"swipe-modal-takumaru-vue-swipe-modal",onMousemove:o[5]||(o[5]=function(){return e.mouseMove&&e.mouseMove.apply(e,arguments)}),onMouseup:o[6]||(o[6]=function(){return e.mouseUp&&e.mouseUp.apply(e,arguments)})},[t.createVNode(t.Transition,{name:"swipe-modal-background",appear:""},{default:t.withCtx((function(){return[e.modelValue?(t.openBlock(),t.createElementBlock("div",{key:0,class:"modal-background",style:t.normalizeStyle({backgroundColor:e.backgroundColor}),onMouseup:o[0]||(o[0]=function(t){return e.persistent?null:e.close()})},null,36)):t.createCommentVNode("",!0)]})),_:1}),t.createVNode(t.Transition,{name:"swipe-modal-contents",appear:""},{default:t.withCtx((function(){return[e.modelValue?(t.openBlock(),t.createElementBlock("div",{key:0,ref:"modal-contents",class:"modal-contents",style:t.normalizeStyle(e.styles),onTouchstart:o[2]||(o[2]=function(){return e.touchStart&&e.touchStart.apply(e,arguments)}),onTouchmove:o[3]||(o[3]=function(){return e.touchMove&&e.touchMove.apply(e,arguments)}),onTouchend:o[4]||(o[4]=function(){return e.touchEnd&&e.touchEnd.apply(e,arguments)})},[e.noTip?t.createCommentVNode("",!0):(t.openBlock(),t.createElementBlock("div",{key:0,class:"modal-contents-chip-wrapper",onMousedown:o[1]||(o[1]=function(){return e.mouseDown&&e.mouseDown.apply(e,arguments)})},[t.createElementVNode("div",{class:"modal-contents-chip",style:t.normalizeStyle("\n              --tip-color: ".concat(e.tipColor,";\n            "))},null,4)],32)),t.renderSlot(e.$slots,"default")],36)):t.createCommentVNode("",!0)]})),_:3})],32)};var n={install:function e(t){e.installed||(e.installed=!0,t.component("swipeModal",o))}},a=null;return"undefined"!=typeof window?a=window.Vue:"undefined"!=typeof global&&(a=global.Vue),a&&a.use(n),e.default=n,e.swipeModal=o,Object.defineProperty(e,"__esModule",{value:!0}),e}({},Vue);
+var SwipeModal=function(e,t){"use strict";var o=t.defineComponent({name:"swipe-modal",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:function(e,o){var n=t.toRefs(e),a=t.ref(!1),l=t.ref(!1),u=t.ref(null),i=t.ref(0),r=t.ref("0px"),d=t.ref(0),s=t.ref(0),p=t.computed({get:function(){return n.modelValue.value},set:function(e){return o.emit("update:modelValue",e)}}),c=t.computed((function(){return{width:n.contentsWidth.value,borderTopLeftRadius:n.borderTopRadius.value?n.borderTopRadius.value:n.borderTopLeftRadius.value,borderTopRightRadius:n.borderTopRadius?n.borderTopRadius.value:n.borderTopRightRadius.value,backgroundColor:n.dark.value?n.darkContentsColor.value:n.contentsColor.value,color:n.dark.value?"white":"black"}}));t.watch((function(){return n.modelValue.value}),(function(e){e.valueOf()&&m()}));var m=function(){a.value=!1,l.value=!1,u.value=null,i.value=0,r.value="0px",d.value=0,s.value=0,document.documentElement.style.setProperty("--contents-height",n.fullscreen.value?"100%":i.value>0?i.value+"px":n.contentsHeight.value),document.documentElement.style.setProperty("--contents-bottom-position",r.value?r.value:"0px"),document.documentElement.style.overflowY="hidden"},v=function(){a.value=!1,l.value=!1,document.documentElement.style.overflowY="auto",o.emit("update:modelValue",!1)};return t.onMounted((function(){})),{propsRef:n,modal:p,modalHeight:i,contentsBottomPosition:r,styles:c,close:v,mouseDown:function(e){u.value=document.querySelector(".modal-contents"),i.value=u.value.getBoundingClientRect().height,d.value=e.pageY,a.value=!0},mouseMove:function(e){a.value&&(s.value=e.pageY,r.value=(d.value-s.value<=0?d.value-s.value:0)+"px"),document.documentElement.style.setProperty("--contents-bottom-position",r.value?r.value:"0px")},mouseUp:function(){a.value=!1,-1*(d.value-s.value)>i.value*(1/8)?v():r.value="0px"},touchStart:function(e){u.value=document.querySelector(".modal-contents"),i.value=u.value.getBoundingClientRect().height,u.value.scrollTop<=0&&(d.value=e.touches[0].pageY,l.value=!0)},touchMove:function(e){l.value&&(s.value=e.touches[0].pageY,d.value-s.value<=0?r.value=d.value-s.value+"px":r.value="0px",r.value=(d.value-s.value<=0?d.value-s.value:0)+"px"),document.documentElement.style.setProperty("--contents-bottom-position",r.value?r.value:"0px")},touchEnd:function(){l.value=!1,-1*(d.value-s.value)>i.value*(1/8)?v():r.value="0px"}}}});!function(e,t){void 0===t&&(t={});var o=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===o&&n.firstChild?n.insertBefore(a,n.firstChild):n.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}(":root {\n  --contents-height: 30vh;\n  --contents-bottom-position: 0%;\n}\n\n#swipe-modal-takumaru-vue-swipe-modal {\n  position: fixed;\n  scrollbar-width: none;\n  z-index: 15;\n}\n#swipe-modal-takumaru-vue-swipe-modal .modal-background {\n  position: fixed;\n  z-index: 11;\n  width: 100vw;\n  height: 100vh;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n#swipe-modal-takumaru-vue-swipe-modal .modal-contents {\n  position: fixed;\n  z-index: 12;\n  min-height: var(--contents-height);\n  max-height: 100vh;\n  bottom: var(--contents-bottom-position);\n  left: 50%;\n  transform: translateX(-50%) translateY(0%);\n  overflow-y: scroll;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  backface-visibility: hidden;\n  -webkit-backface-visibility: hidden;\n  filter: drop-shadow(0px 16px 40px rgba(0, 37, 80, 0.2));\n}\n#swipe-modal-takumaru-vue-swipe-modal .modal-contents::-webkit-scrollbar {\n  width: 0px;\n}\n#swipe-modal-takumaru-vue-swipe-modal .modal-contents-chip-wrapper {\n  z-index: 12;\n  display: flex;\n  justify-items: center;\n  align-items: center;\n  justify-content: center;\n  align-content: center;\n  position: relative;\n  top: 0px;\n  height: 4px;\n  width: 100%;\n  padding-top: 8px;\n  padding-bottom: 8px;\n  cursor: s-resize;\n}\n#swipe-modal-takumaru-vue-swipe-modal .modal-contents-chip {\n  --tip-color: #c8c8c8;\n  width: 40px;\n  height: 100%;\n  border-radius: 4px;\n  background-color: var(--tip-color);\n}\n#swipe-modal-takumaru-vue-swipe-modal .swipe-modal-background-enter {\n  opacity: 0;\n}\n#swipe-modal-takumaru-vue-swipe-modal .swipe-modal-background-enter-from {\n  opacity: 0;\n}\n#swipe-modal-takumaru-vue-swipe-modal .swipe-modal-background-enter-active {\n  transition: all 0.2s ease-out;\n}\n#swipe-modal-takumaru-vue-swipe-modal .swipe-modal-background-enter-to {\n  opacity: 1;\n}\n#swipe-modal-takumaru-vue-swipe-modal .swipe-modal-background-leave {\n  opacity: 1;\n}\n#swipe-modal-takumaru-vue-swipe-modal .swipe-modal-background-leave-from {\n  opacity: 1;\n}\n#swipe-modal-takumaru-vue-swipe-modal .swipe-modal-background-leave-active {\n  transition: all 0.2s ease-out;\n}\n#swipe-modal-takumaru-vue-swipe-modal .swipe-modal-background-leave-to {\n  opacity: 0;\n}\n#swipe-modal-takumaru-vue-swipe-modal .swipe-modal-contents-enter {\n  bottom: calc(-1 * var(--contents-height)) !important;\n}\n#swipe-modal-takumaru-vue-swipe-modal .swipe-modal-contents-enter-from {\n  bottom: calc(-1 * var(--contents-height)) !important;\n}\n#swipe-modal-takumaru-vue-swipe-modal .swipe-modal-contents-enter-active {\n  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);\n}\n#swipe-modal-takumaru-vue-swipe-modal .swipe-modal-contents-enter-to {\n  bottom: var(--contents-bottom-position) !important;\n}\n#swipe-modal-takumaru-vue-swipe-modal .swipe-modal-contents-leave {\n  bottom: var(--contents-bottom-position) !important;\n}\n#swipe-modal-takumaru-vue-swipe-modal .swipe-modal-contents-leave-from {\n  bottom: var(--contents-bottom-position) !important;\n}\n#swipe-modal-takumaru-vue-swipe-modal .swipe-modal-contents-leave-active {\n  transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);\n}\n#swipe-modal-takumaru-vue-swipe-modal .swipe-modal-contents-leave-to {\n  bottom: calc(-1 * var(--contents-height)) !important;\n}"),o.render=function(e,o,n,a,l,u){return t.openBlock(),t.createElementBlock("div",{id:"swipe-modal-takumaru-vue-swipe-modal",onMousemove:o[5]||(o[5]=function(){return e.mouseMove&&e.mouseMove.apply(e,arguments)}),onMouseup:o[6]||(o[6]=function(){return e.mouseUp&&e.mouseUp.apply(e,arguments)})},[t.createVNode(t.Transition,{name:"swipe-modal-background",appear:""},{default:t.withCtx((function(){return[e.modelValue?(t.openBlock(),t.createElementBlock("div",{key:0,class:"modal-background",style:t.normalizeStyle({backgroundColor:e.backgroundColor}),onMouseup:o[0]||(o[0]=function(t){return e.persistent?null:e.close()})},null,36)):t.createCommentVNode("",!0)]})),_:1}),t.createVNode(t.Transition,{name:"swipe-modal-contents",appear:""},{default:t.withCtx((function(){return[e.modelValue?(t.openBlock(),t.createElementBlock("div",{key:0,ref:"modal-contents",class:"modal-contents",style:t.normalizeStyle(e.styles),onTouchstart:o[2]||(o[2]=function(){return e.touchStart&&e.touchStart.apply(e,arguments)}),onTouchmove:o[3]||(o[3]=function(){return e.touchMove&&e.touchMove.apply(e,arguments)}),onTouchend:o[4]||(o[4]=function(){return e.touchEnd&&e.touchEnd.apply(e,arguments)})},[e.noTip?t.createCommentVNode("",!0):(t.openBlock(),t.createElementBlock("div",{key:0,class:"modal-contents-chip-wrapper",onMousedown:o[1]||(o[1]=function(){return e.mouseDown&&e.mouseDown.apply(e,arguments)})},[t.createElementVNode("div",{class:"modal-contents-chip",style:t.normalizeStyle("\n              --tip-color: ".concat(e.tipColor,";\n            "))},null,4)],32)),t.renderSlot(e.$slots,"default")],36)):t.createCommentVNode("",!0)]})),_:3})],32)};var n={install:function e(t){e.installed||(e.installed=!0,t.component("swipeModal",o))}},a=null;return"undefined"!=typeof window?a=window.Vue:"undefined"!=typeof global&&(a=global.Vue),a&&a.use(n),e.default=n,e.swipeModal=o,Object.defineProperty(e,"__esModule",{value:!0}),e}({},Vue);

dist/swipe-modal.ssr.js

@@ -104,3 +104,3 @@ 'use strict';Object.defineProperty(exports,'__esModule',{value:true});var vue=require('vue');var script = vue.defineComponent({
     }, function (newModal) {
-      if (newModal) {
+      if (newModal.valueOf()) {
         open();
@@ -303,11 +303,8 @@ }
   install.installed = true;
-  Vue.component('swipeModal', script); // Vuetifyのように、どこからでもこのコンポーネントを呼び出せるようにする
-}; // Vue.use() のためのモジュール定義を作成
-// Create module definition for Vue.use()
+  Vue.component('swipeModal', script);
+};
 
-
 var plugin = {
   install: install
-}; // vue が見つかった場合に自動インストールする (ブラウザで <script> タグを用いた場合等)
-
+};
 var GlobalVue = null;
@@ -314,0 +311,0 @@

package.json

 {
   "name": "@takuma-ru/vue-swipe-modal",
-  "version": "3.2.2",
+  "version": "3.2.3",
   "private": false,
@@ -32,3 +32,3 @@ "description": "",
   },
-  "homepage": "https://vue-swipe-modal.vercel.app/",
+  "homepage": "https://vue-swipe-modal-vue2.vercel.app",
   "main": "dist/swipe-modal.ssr.js",
@@ -81,3 +81,3 @@ "browser": "dist/swipe-modal.esm.js",
     "vue-template-compiler": "^2.6.12",
-    "vue": "npm:vue@^3"
+    "vue" : "npm:vue@^3"
   },
@@ -84,0 +84,0 @@ "peerDependencies": {

README.md

@@ -14,3 +14,3 @@ # @takuma-ru/vue-swpie-modal
 ## DEMO
-https://vue-swipe-modal.vercel.app/
+[vue2-demo-link](https://vue-swipe-modal-vue2.vercel.app)
 
@@ -17,0 +17,0 @@ ## Getting Started

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

No website

Quality

Package does not have a website.

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

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

61719

increased by18.69%

Number of package files

8

increased by14.29%

Worsened metrics

Lines of code

601

decreased by-0.33%

No dependency changes