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

Comparing version 3.0.0 to 3.1.0

dist/swipe-modal.esm.js

@@ -1,6 +0,3 @@
-import { defineComponent, ref, computed, watch, isVue2, isVue3 } from 'vue-demi';
-import { openBlock, createElementBlock, createVNode, Transition, withCtx, normalizeStyle, createCommentVNode, renderSlot } from 'vue';
-
-var script = defineComponent({
-  name: 'SwipeModal',
+import {defineComponent,toRefs,ref,computed,watch,onMounted,openBlock,createElementBlock,createVNode,Transition,withCtx,normalizeStyle,createCommentVNode,createTextVNode,toDisplayString,renderSlot}from'vue';var script = defineComponent({
+  name: 'swipe-modal',
   model: {
@@ -75,2 +72,3 @@ prop: 'modelValue',
     // const
+    const propsRef = toRefs(props);
     const isMouseDown = ref(false);
@@ -85,7 +83,19 @@ const isTouch = ref(false);
     const modal = computed({
-      get: () => props.modelValue,
+      get: () => propsRef.modelValue.value,
       set: value => context.emit('update:modelValue', value)
+    });
+    const styles = computed(() => {
+      return {
+        width: props.contentsWidth,
+        borderTopLeftRadius: props.borderTopRadius ? props.borderTopRadius : props.borderTopLeftRadius,
+        borderTopRightRadius: props.borderTopRadius ? props.borderTopRadius : props.borderTopRightRadius,
+        backgroundColor: props.dark ? props.darkContentsColor : props.contentsColor,
+        color: props.dark ? 'white' : 'black'
+        /* '--contents-height': props.fullscreen ? '100%' : modalHeight.value > 0 ? modalHeight.value + 'px' : props.contentsHeight,
+        '--contents-bottom-position': contentsBottomPosition.value ? contentsBottomPosition.value : '0px', */
+
+      };
     }); // watch
 
-    watch(modal, newModal => {
+    watch(() => propsRef.modelValue.value, newModal => {
       if (newModal) {
@@ -104,2 +114,4 @@ open();
       nowMovePosition.value = 0;
+      document.documentElement.style.setProperty('--contents-height', props.fullscreen ? '100%' : modalHeight.value > 0 ? modalHeight.value + 'px' : props.contentsHeight);
+      document.documentElement.style.setProperty('--contents-bottom-position', contentsBottomPosition.value ? contentsBottomPosition.value : '0px');
     };
@@ -117,2 +129,3 @@
       context.emit('update:modelValue', false);
+      /* setTimeout(init, 250) */
     };
@@ -132,2 +145,4 @@
       }
+
+      document.documentElement.style.setProperty('--contents-bottom-position', contentsBottomPosition.value ? contentsBottomPosition.value : '0px');
     };
@@ -167,2 +182,4 @@
       }
+
+      document.documentElement.style.setProperty('--contents-bottom-position', contentsBottomPosition.value ? contentsBottomPosition.value : '0px');
     };
@@ -178,7 +195,12 @@
       }
-    };
+    }; //lifeCycle
 
+
+    onMounted(() => {});
     return {
+      propsRef,
+      modal,
       modalHeight,
       contentsBottomPosition,
+      styles,
       close,
@@ -190,11 +212,7 @@ mouseDown,
       touchMove,
-      touchEnd,
-      isVue2,
-      isVue3
+      touchEnd
     };
   }
 
-});
-
-function render(_ctx, _cache, $props, $setup, $data, $options) {
+});function render(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
@@ -229,11 +247,9 @@ id: "swipe-modal-takumaru-vue-swipe-modal",
       class: "modal-contents",
-      style: normalizeStyle(`
-          width: ${_ctx.contentsWidth};
-          --contents-height: ${_ctx.fullscreen ? '100%' : _ctx.modalHeight > 0 ? _ctx.modalHeight + 'px' : _ctx.contentsHeight};
-          border-top-left-radius: ${_ctx.borderTopRadius ? _ctx.borderTopRadius : _ctx.borderTopLeftRadius};
-          border-top-right-radius: ${_ctx.borderTopRadius ? _ctx.borderTopRadius : _ctx.borderTopRightRadius};
-          background-color: ${_ctx.dark ? _ctx.darkContentsColor : _ctx.contentsColor};
-          color: ${_ctx.dark ? 'white' : 'back'};
-          --contents-bottom-position: ${_ctx.contentsBottomPosition};
-        `),
+      style: normalizeStyle({
+        width: _ctx.contentsWidth,
+        borderTopLeftRadius: _ctx.borderTopRadius ? _ctx.borderTopRadius : _ctx.borderTopLeftRadius,
+        borderTopRightRadius: _ctx.borderTopRadius ? _ctx.borderTopRadius : _ctx.borderTopRightRadius,
+        backgroundColor: _ctx.dark ? _ctx.darkContentsColor : _ctx.contentsColor,
+        color: _ctx.dark ? 'white' : 'black'
+      }),
       onTouchstart: _cache[2] || (_cache[2] = function () {
@@ -257,8 +273,6 @@ return _ctx.touchStart && _ctx.touchStart(...arguments);
       })
-    }, null, 36)) : createCommentVNode("", true), renderSlot(_ctx.$slots, "default")], 36)) : createCommentVNode("", true)]),
+    }, null, 36)) : createCommentVNode("", true), createTextVNode(" " + toDisplayString(_ctx.modelValue + '' + _ctx.modal + '' + _ctx.propsRef.modelValue.value) + " " + toDisplayString(_ctx.styles) + " ", 1), renderSlot(_ctx.$slots, "default")], 36)) : createCommentVNode("", true)]),
     _: 3
   })], 32);
-}
-
-function styleInject(css, ref) {
+}function styleInject(css, ref) {
   if (ref === void 0) ref = {};
@@ -290,9 +304,26 @@ var insertAt = ref.insertAt;
   }
-}
+}var css_248z = ":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 {\n  --tip-color: #c8c8c8;\n  z-index: 12;\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::after {\n  position: absolute;\n  content: \"\";\n  top: 8px;\n  height: 4px;\n  width: 40px;\n  background-color: var(--tip-color);\n  transform: translateX(-50%);\n  border-radius: 10px;\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}";
+styleInject(css_248z);script.render = render;// 重複して読み込まないようにする
+const install = function (Vue) {
+  if (install.installed) return;
+  install.installed = true;
+  Vue.component('swipeModal', script); // Vuetifyのように、どこからでもこのコンポーネントを呼び出せるようにする
+}; // Vue.use() のためのモジュール定義を作成
+// Create module definition for Vue.use()
 
-var css_248z = "#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  --contents-height: 30vh;\n  --contents-bottom-position: 0%;\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 {\n  --tip-color: #c8c8c8;\n  z-index: 12;\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::after {\n  position: absolute;\n  content: \"\";\n  top: 8px;\n  height: 4px;\n  width: 40px;\n  background-color: var(--tip-color);\n  transform: translateX(-50%);\n  border-radius: 10px;\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}";
-styleInject(css_248z);
 
-script.render = render;
+const plugin = {
+  install
+}; // vue が見つかった場合に自動インストールする (ブラウザで <script> タグを用いた場合等)
 
-export { script as swipeModal };
+let GlobalVue = null;
+
+if (typeof window !== 'undefined') {
+  GlobalVue = window.Vue;
+} else if (typeof global !== 'undefined') {
+  GlobalVue = global.Vue;
+}
+
+if (GlobalVue) {
+  GlobalVue.use(plugin);
+}export{plugin as default,script as swipeModal};

dist/swipe-modal.min.js

@@ -1,1 +0,1 @@
-var SwipeModal=function(e,t){"use strict";function o(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var o=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==o)return;var n,a,l=[],r=!0,u=!1;try{for(o=o.call(e);!(r=(n=o.next()).done)&&(l.push(n.value),!t||l.length!==t);r=!0);}catch(e){u=!0,a=e}finally{try{r||null==o.return||o.return()}finally{if(u)throw a}}return l}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return n(e,t);var o=Object.prototype.toString.call(e).slice(8,-1);"Object"===o&&e.constructor&&(o=e.constructor.name);if("Map"===o||"Set"===o)return Array.from(e);if("Arguments"===o||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(o))return n(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function n(e,t){(null==t||t>e.length)&&(t=e.length);for(var o=0,n=new Array(t);o<t;o++)n[o]=e[o];return n}var a=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:function(t,o){var n=e.ref(!1),a=e.ref(!1),l=e.ref(null),r=e.ref(0),u=e.ref("0px"),i=e.ref(0),d=e.ref(0),s=e.computed({get:function(){return t.modelValue},set:function(e){return o.emit("update:modelValue",e)}});e.watch(s,(function(e){e&&c()}));var c=function(){n.value=!1,a.value=!1,l.value=null,r.value=0,u.value="0px",i.value=0,d.value=0,document.documentElement.style.overflowY="hidden"},p=function(){n.value=!1,a.value=!1,document.documentElement.style.overflowY="auto",o.emit("update:modelValue",!1)};return{modalHeight:r,contentsBottomPosition:u,close:p,mouseDown:function(e){l.value=document.querySelector(".modal-contents"),r.value=l.value.getBoundingClientRect().height,i.value=e.pageY,n.value=!0},mouseMove:function(e){n.value&&(d.value=e.pageY,u.value=(i.value-d.value<=0?i.value-d.value:0)+"px")},mouseUp:function(){n.value=!1,-1*(i.value-d.value)>r.value*(1/8)?p():u.value="0px"},touchStart:function(e){l.value=document.querySelector(".modal-contents"),r.value=l.value.getBoundingClientRect().height,l.value.scrollTop<=0&&(i.value=e.touches[0].pageY,a.value=!0)},touchMove:function(e){a.value&&(d.value=e.touches[0].pageY,i.value-d.value<=0?u.value=i.value-d.value+"px":u.value="0px",u.value=(i.value-d.value<=0?i.value-d.value:0)+"px")},touchEnd:function(){a.value=!1,-1*(i.value-d.value)>r.value*(1/8)?p():u.value="0px"},isVue2:e.isVue2,isVue3:e.isVue3}}});!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))}}('#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  --contents-height: 30vh;\n  --contents-bottom-position: 0%;\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 {\n  --tip-color: #c8c8c8;\n  z-index: 12;\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::after {\n  position: absolute;\n  content: "";\n  top: 8px;\n  height: 4px;\n  width: 40px;\n  background-color: var(--tip-color);\n  transform: translateX(-50%);\n  border-radius: 10px;\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}'),a.render=function(e,o,n,a,l,r){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("\n          width: ".concat(e.contentsWidth,";\n          --contents-height: ").concat(e.fullscreen?"100%":e.modalHeight>0?e.modalHeight+"px":e.contentsHeight,";\n          border-top-left-radius: ").concat(e.borderTopRadius?e.borderTopRadius:e.borderTopLeftRadius,";\n          border-top-right-radius: ").concat(e.borderTopRadius?e.borderTopRadius:e.borderTopRightRadius,";\n          background-color: ").concat(e.dark?e.darkContentsColor:e.contentsColor,";\n          color: ").concat(e.dark?"white":"back",";\n          --contents-bottom-position: ").concat(e.contentsBottomPosition,";\n        ")),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",style:t.normalizeStyle("\n            --tip-color: ".concat(e.tipColor,";\n          ")),onMousedown:o[1]||(o[1]=function(){return e.mouseDown&&e.mouseDown.apply(e,arguments)})},null,36)),t.renderSlot(e.$slots,"default")],36)):t.createCommentVNode("",!0)]})),_:3})],32)};var l=Object.freeze({__proto__:null,swipeModal:a}),r={};return Object.entries(l).forEach((function(e){var t=o(e,2),n=t[0],a=t[1];if("default"!==n){var l=a;r[n]=l}})),r}(VueDemi,Vue);
+var SwipeModal=function(e,o){"use strict";var t=o.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,t){var n=o.toRefs(e),a=o.ref(!1),l=o.ref(!1),u=o.ref(null),i=o.ref(0),r=o.ref("0px"),d=o.ref(0),s=o.ref(0),p=o.computed({get:function(){return n.modelValue.value},set:function(e){return t.emit("update:modelValue",e)}}),m=o.computed((function(){return{width:e.contentsWidth,borderTopLeftRadius:e.borderTopRadius?e.borderTopRadius:e.borderTopLeftRadius,borderTopRightRadius:e.borderTopRadius?e.borderTopRadius:e.borderTopRightRadius,backgroundColor:e.dark?e.darkContentsColor:e.contentsColor,color:e.dark?"white":"black"}}));o.watch((function(){return n.modelValue.value}),(function(e){e&&c()}));var c=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",e.fullscreen?"100%":i.value>0?i.value+"px":e.contentsHeight),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",t.emit("update:modelValue",!1)};return o.onMounted((function(){})),{propsRef:n,modal:p,modalHeight:i,contentsBottomPosition:r,styles:m,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,o){void 0===o&&(o={});var t=o.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===t&&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 {\n  --tip-color: #c8c8c8;\n  z-index: 12;\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::after {\n  position: absolute;\n  content: "";\n  top: 8px;\n  height: 4px;\n  width: 40px;\n  background-color: var(--tip-color);\n  transform: translateX(-50%);\n  border-radius: 10px;\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}'),t.render=function(e,t,n,a,l,u){return o.openBlock(),o.createElementBlock("div",{id:"swipe-modal-takumaru-vue-swipe-modal",onMousemove:t[5]||(t[5]=function(){return e.mouseMove&&e.mouseMove.apply(e,arguments)}),onMouseup:t[6]||(t[6]=function(){return e.mouseUp&&e.mouseUp.apply(e,arguments)})},[o.createVNode(o.Transition,{name:"swipe-modal-background",appear:""},{default:o.withCtx((function(){return[e.modelValue?(o.openBlock(),o.createElementBlock("div",{key:0,class:"modal-background",style:o.normalizeStyle({backgroundColor:e.backgroundColor}),onMouseup:t[0]||(t[0]=function(o){return e.persistent?null:e.close()})},null,36)):o.createCommentVNode("",!0)]})),_:1}),o.createVNode(o.Transition,{name:"swipe-modal-contents",appear:""},{default:o.withCtx((function(){return[e.modelValue?(o.openBlock(),o.createElementBlock("div",{key:0,ref:"modal-contents",class:"modal-contents",style:o.normalizeStyle({width:e.contentsWidth,borderTopLeftRadius:e.borderTopRadius?e.borderTopRadius:e.borderTopLeftRadius,borderTopRightRadius:e.borderTopRadius?e.borderTopRadius:e.borderTopRightRadius,backgroundColor:e.dark?e.darkContentsColor:e.contentsColor,color:e.dark?"white":"black"}),onTouchstart:t[2]||(t[2]=function(){return e.touchStart&&e.touchStart.apply(e,arguments)}),onTouchmove:t[3]||(t[3]=function(){return e.touchMove&&e.touchMove.apply(e,arguments)}),onTouchend:t[4]||(t[4]=function(){return e.touchEnd&&e.touchEnd.apply(e,arguments)})},[e.noTip?o.createCommentVNode("",!0):(o.openBlock(),o.createElementBlock("div",{key:0,class:"modal-contents-chip",style:o.normalizeStyle("\n            --tip-color: ".concat(e.tipColor,";\n          ")),onMousedown:t[1]||(t[1]=function(){return e.mouseDown&&e.mouseDown.apply(e,arguments)})},null,36)),o.createTextVNode(" "+o.toDisplayString(e.modelValue+""+e.modal+e.propsRef.modelValue.value)+" "+o.toDisplayString(e.styles)+" ",1),o.renderSlot(e.$slots,"default")],36)):o.createCommentVNode("",!0)]})),_:3})],32)};var n={install:function e(o){e.installed||(e.installed=!0,o.component("swipeModal",t))}},a=null;return"undefined"!=typeof window?a=window.Vue:"undefined"!=typeof global&&(a=global.Vue),a&&a.use(n),e.default=n,e.swipeModal=t,Object.defineProperty(e,"__esModule",{value:!0}),e}({},Vue);

dist/swipe-modal.ssr.js

@@ -1,60 +0,3 @@
-'use strict';var vueDemi=require('vue-demi'),vue=require('vue');function _slicedToArray(arr, i) {
-  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
-}
-
-function _arrayWithHoles(arr) {
-  if (Array.isArray(arr)) return arr;
-}
-
-function _iterableToArrayLimit(arr, i) {
-  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
-
-  if (_i == null) return;
-  var _arr = [];
-  var _n = true;
-  var _d = false;
-
-  var _s, _e;
-
-  try {
-    for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
-      _arr.push(_s.value);
-
-      if (i && _arr.length === i) break;
-    }
-  } catch (err) {
-    _d = true;
-    _e = err;
-  } finally {
-    try {
-      if (!_n && _i["return"] != null) _i["return"]();
-    } finally {
-      if (_d) throw _e;
-    }
-  }
-
-  return _arr;
-}
-
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-}
-
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-
-  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-
-  return arr2;
-}
-
-function _nonIterableRest() {
-  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}var script = vueDemi.defineComponent({
-  name: 'SwipeModal',
+'use strict';Object.defineProperty(exports,'__esModule',{value:true});var vue=require('vue');var script = vue.defineComponent({
+  name: 'swipe-modal',
   model: {
@@ -128,13 +71,14 @@ prop: 'modelValue',
     // const
-    var isMouseDown = vueDemi.ref(false);
-    var isTouch = vueDemi.ref(false);
-    var modalQuery = vueDemi.ref(null);
-    var modalHeight = vueDemi.ref(0);
-    var contentsBottomPosition = vueDemi.ref('0px');
-    var moveStartPosition = vueDemi.ref(0);
-    var nowMovePosition = vueDemi.ref(0); // computed
+    var propsRef = vue.toRefs(props);
+    var isMouseDown = vue.ref(false);
+    var isTouch = vue.ref(false);
+    var modalQuery = vue.ref(null);
+    var modalHeight = vue.ref(0);
+    var contentsBottomPosition = vue.ref('0px');
+    var moveStartPosition = vue.ref(0);
+    var nowMovePosition = vue.ref(0); // computed
 
-    var modal = vueDemi.computed({
+    var modal = vue.computed({
       get: function get() {
-        return props.modelValue;
+        return propsRef.modelValue.value;
       },
@@ -144,5 +88,19 @@ set: function set(value) {
       }
+    });
+    var styles = vue.computed(function () {
+      return {
+        width: props.contentsWidth,
+        borderTopLeftRadius: props.borderTopRadius ? props.borderTopRadius : props.borderTopLeftRadius,
+        borderTopRightRadius: props.borderTopRadius ? props.borderTopRadius : props.borderTopRightRadius,
+        backgroundColor: props.dark ? props.darkContentsColor : props.contentsColor,
+        color: props.dark ? 'white' : 'black'
+        /* '--contents-height': props.fullscreen ? '100%' : modalHeight.value > 0 ? modalHeight.value + 'px' : props.contentsHeight,
+        '--contents-bottom-position': contentsBottomPosition.value ? contentsBottomPosition.value : '0px', */
+
+      };
     }); // watch
 
-    vueDemi.watch(modal, function (newModal) {
+    vue.watch(function () {
+      return propsRef.modelValue.value;
+    }, function (newModal) {
       if (newModal) {
@@ -161,2 +119,4 @@ open();
       nowMovePosition.value = 0;
+      document.documentElement.style.setProperty('--contents-height', props.fullscreen ? '100%' : modalHeight.value > 0 ? modalHeight.value + 'px' : props.contentsHeight);
+      document.documentElement.style.setProperty('--contents-bottom-position', contentsBottomPosition.value ? contentsBottomPosition.value : '0px');
     };
@@ -174,2 +134,3 @@
       context.emit('update:modelValue', false);
+      /* setTimeout(init, 250) */
     };
@@ -189,2 +150,4 @@
       }
+
+      document.documentElement.style.setProperty('--contents-bottom-position', contentsBottomPosition.value ? contentsBottomPosition.value : '0px');
     };
@@ -224,2 +187,4 @@
       }
+
+      document.documentElement.style.setProperty('--contents-bottom-position', contentsBottomPosition.value ? contentsBottomPosition.value : '0px');
     };
@@ -235,7 +200,12 @@
       }
-    };
+    }; //lifeCycle
 
+
+    vue.onMounted(function () {});
     return {
+      propsRef: propsRef,
+      modal: modal,
       modalHeight: modalHeight,
       contentsBottomPosition: contentsBottomPosition,
+      styles: styles,
       close: close,
@@ -247,5 +217,3 @@ mouseDown: mouseDown,
       touchMove: touchMove,
-      touchEnd: touchEnd,
-      isVue2: vueDemi.isVue2,
-      isVue3: vueDemi.isVue3
+      touchEnd: touchEnd
     };
@@ -288,3 +256,9 @@ }
         class: "modal-contents",
-        style: vue.normalizeStyle("\n          width: ".concat(_ctx.contentsWidth, ";\n          --contents-height: ").concat(_ctx.fullscreen ? '100%' : _ctx.modalHeight > 0 ? _ctx.modalHeight + 'px' : _ctx.contentsHeight, ";\n          border-top-left-radius: ").concat(_ctx.borderTopRadius ? _ctx.borderTopRadius : _ctx.borderTopLeftRadius, ";\n          border-top-right-radius: ").concat(_ctx.borderTopRadius ? _ctx.borderTopRadius : _ctx.borderTopRightRadius, ";\n          background-color: ").concat(_ctx.dark ? _ctx.darkContentsColor : _ctx.contentsColor, ";\n          color: ").concat(_ctx.dark ? 'white' : 'back', ";\n          --contents-bottom-position: ").concat(_ctx.contentsBottomPosition, ";\n        ")),
+        style: vue.normalizeStyle({
+          width: _ctx.contentsWidth,
+          borderTopLeftRadius: _ctx.borderTopRadius ? _ctx.borderTopRadius : _ctx.borderTopLeftRadius,
+          borderTopRightRadius: _ctx.borderTopRadius ? _ctx.borderTopRadius : _ctx.borderTopRightRadius,
+          backgroundColor: _ctx.dark ? _ctx.darkContentsColor : _ctx.contentsColor,
+          color: _ctx.dark ? 'white' : 'black'
+        }),
         onTouchstart: _cache[2] || (_cache[2] = function () {
@@ -306,3 +280,3 @@ return _ctx.touchStart && _ctx.touchStart.apply(_ctx, arguments);
         })
-      }, null, 36)) : vue.createCommentVNode("", true), vue.renderSlot(_ctx.$slots, "default")], 36)) : vue.createCommentVNode("", true)];
+      }, null, 36)) : vue.createCommentVNode("", true), vue.createTextVNode(" " + vue.toDisplayString(_ctx.modelValue + '' + _ctx.modal + '' + _ctx.propsRef.modelValue.value) + " " + vue.toDisplayString(_ctx.styles) + " ", 1), vue.renderSlot(_ctx.$slots, "default")], 36)) : vue.createCommentVNode("", true)];
     }),
@@ -338,14 +312,26 @@ _: 3
   }
-}var css_248z = "#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  --contents-height: 30vh;\n  --contents-bottom-position: 0%;\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 {\n  --tip-color: #c8c8c8;\n  z-index: 12;\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::after {\n  position: absolute;\n  content: \"\";\n  top: 8px;\n  height: 4px;\n  width: 40px;\n  background-color: var(--tip-color);\n  transform: translateX(-50%);\n  border-radius: 10px;\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}";
-styleInject(css_248z);script.render = render;var components=/*#__PURE__*/Object.freeze({__proto__:null,swipeModal:script});var plugin = {};
-Object.entries(components).forEach(function (_ref) {
-  var _ref2 = _slicedToArray(_ref, 2),
-      componentName = _ref2[0],
-      component = _ref2[1];
+}var css_248z = ":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 {\n  --tip-color: #c8c8c8;\n  z-index: 12;\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::after {\n  position: absolute;\n  content: \"\";\n  top: 8px;\n  height: 4px;\n  width: 40px;\n  background-color: var(--tip-color);\n  transform: translateX(-50%);\n  border-radius: 10px;\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}";
+styleInject(css_248z);script.render = render;// 重複して読み込まないようにする
+var install = function install(Vue) {
+  if (install.installed) return;
+  install.installed = true;
+  Vue.component('swipeModal', script); // Vuetifyのように、どこからでもこのコンポーネントを呼び出せるようにする
+}; // Vue.use() のためのモジュール定義を作成
+// Create module definition for Vue.use()
 
-  if (componentName !== 'default') {
-    var key = componentName;
-    var val = component;
-    plugin[key] = val;
-  }
-});module.exports=plugin;
+
+var plugin = {
+  install: install
+}; // vue が見つかった場合に自動インストールする (ブラウザで <script> タグを用いた場合等)
+
+var GlobalVue = null;
+
+if (typeof window !== 'undefined') {
+  GlobalVue = window.Vue;
+} else if (typeof global !== 'undefined') {
+  GlobalVue = global.Vue;
+}
+
+if (GlobalVue) {
+  GlobalVue.use(plugin);
+}exports["default"]=plugin;exports.swipeModal=script;

package.json

 {
   "name": "@takuma-ru/vue-swipe-modal",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "private": false,
@@ -34,9 +34,10 @@ "description": "",
   "main": "dist/swipe-modal.ssr.js",
-  "browser": "src/lib-components/swipeModal.vue",
+  "browser": "dist/swipe-modal.esm.js",
   "module": "dist/swipe-modal.esm.js",
   "unpkg": "dist/swipe-modal.min.js",
-  "types": "dist/lib-components/swipeModal.vue.d.ts",
+  "types": "src/types.d.ts",
   "files": [
     "dist/*",
-    "src/**/*.vue"
+    "src/**/*.vue",
+    "src/types.d.ts"
   ],
@@ -56,2 +57,4 @@ "sideEffects": false,
   "devDependencies": {
+    "@rollup/plugin-buble": "^0.21.3",
+    "@rollup/plugin-typescript": "^8.3.2",
     "@babel/core": "^7.12.10",
@@ -77,5 +80,5 @@ "@babel/preset-env": "^7.12.11",
     "typescript": "^4.0.0",
-    "vue": "^2.6.0",
+    "vue2": "npm:vue@^2.6.0",
     "vue-template-compiler": "^2.6.12",
-    "vue3": "npm:vue@3"
+    "vue": "npm:vue@^3"
   },
@@ -82,0 +85,0 @@ "peerDependencies": {

README.md

@@ -40,3 +40,3 @@ # @takuma-ru/vue-swpie-modal
 import { ref } from 'vue'
-import swipeModal from '@takuma-ru/vue-swipe-modal/src/lib-components/swipeModal.vue'
+import { swipeModal } from '@takuma-ru/vue-swipe-modal'
 
@@ -65,3 +65,3 @@ const modal = ref(false)
 import { defineComponent, ref, reactive } from '@vue/composition-api';
-import swipeModal from '@takuma-ru/vue-swipe-modal'
+import { swipeModal } from '@takuma-ru/vue-swipe-modal'
 
@@ -68,0 +68,0 @@ export default defineComponent({

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

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

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

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

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

52817

decreased by-1.12%

Dev dependency count

25

increased by8.7%

Number of package files

7

decreased by-30%

Lines of code

614

decreased by-16.8%

No dependency changes