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

Comparing version 3.1.0 to 3.2.0

dist/swipe-modal.esm.js

@@ -1,2 +0,2 @@
-import {defineComponent,toRefs,ref,computed,watch,onMounted,openBlock,createElementBlock,createVNode,Transition,withCtx,normalizeStyle,createCommentVNode,createTextVNode,toDisplayString,renderSlot}from'vue';var script = defineComponent({
+import {defineComponent,toRefs,ref,computed,watch,onMounted,openBlock,createElementBlock,createVNode,Transition,withCtx,normalizeStyle,createCommentVNode,createElementVNode,renderSlot}from'vue';var script = defineComponent({
   name: 'swipe-modal',
@@ -87,8 +87,8 @@ model: {
       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,
+        width: propsRef.contentsWidth.value,
+        borderTopLeftRadius: propsRef.borderTopRadius.value ? propsRef.borderTopRadius.value : propsRef.borderTopLeftRadius.value,
+        borderTopRightRadius: propsRef.borderTopRadius ? propsRef.borderTopRadius.value : propsRef.borderTopRightRadius.value,
+        backgroundColor: propsRef.dark.value ? propsRef.darkContentsColor.value : propsRef.contentsColor.value,
+        color: propsRef.dark.value ? 'white' : 'black'
+        /* '--contents-height': propsRef.fullscreen.value? '100%' : modalHeight.value > 0 ? modalHeight.value + 'px' : propsRef.contentsHeight.value,
         '--contents-bottom-position': contentsBottomPosition.value ? contentsBottomPosition.value : '0px', */
@@ -113,3 +113,3 @@
       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-height', propsRef.fullscreen.value ? '100%' : modalHeight.value > 0 ? modalHeight.value + 'px' : propsRef.contentsHeight.value);
       document.documentElement.style.setProperty('--contents-bottom-position', contentsBottomPosition.value ? contentsBottomPosition.value : '0px');
@@ -128,3 +128,2 @@ };
       context.emit('update:modelValue', false);
-      /* setTimeout(init, 250) */
     };
@@ -242,9 +241,3 @@
       class: "modal-contents",
-      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'
-      }),
+      style: normalizeStyle(_ctx.styles),
       onTouchstart: _cache[2] || (_cache[2] = function () {
@@ -261,10 +254,12 @@ return _ctx.touchStart && _ctx.touchStart(...arguments);
       key: 0,
-      class: "modal-contents-chip",
-      style: normalizeStyle(`
-            --tip-color: ${_ctx.tipColor};
-          `),
+      class: "modal-contents-chip-wrapper",
       onMousedown: _cache[1] || (_cache[1] = function () {
         return _ctx.mouseDown && _ctx.mouseDown(...arguments);
       })
-    }, 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)]),
+    }, [createElementVNode("div", {
+      class: "modal-contents-chip",
+      style: normalizeStyle(`
+              --tip-color: ${_ctx.tipColor};
+            `)
+    }, null, 4)], 32)) : createCommentVNode("", true), renderSlot(_ctx.$slots, "default")], 36)) : createCommentVNode("", true)]),
     _: 3
@@ -299,3 +294,3 @@ })], 32);
   }
-}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}";
+}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-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}";
 styleInject(css_248z);script.render = render;// 重複して読み込まないようにする
@@ -302,0 +297,0 @@ const install = function (Vue) {

dist/swipe-modal.min.js

@@ -1,1 +0,1 @@
-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);
+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);

dist/swipe-modal.ssr.js

@@ -90,8 +90,8 @@ 'use strict';Object.defineProperty(exports,'__esModule',{value:true});var vue=require('vue');var script = vue.defineComponent({
       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,
+        width: propsRef.contentsWidth.value,
+        borderTopLeftRadius: propsRef.borderTopRadius.value ? propsRef.borderTopRadius.value : propsRef.borderTopLeftRadius.value,
+        borderTopRightRadius: propsRef.borderTopRadius ? propsRef.borderTopRadius.value : propsRef.borderTopRightRadius.value,
+        backgroundColor: propsRef.dark.value ? propsRef.darkContentsColor.value : propsRef.contentsColor.value,
+        color: propsRef.dark.value ? 'white' : 'black'
+        /* '--contents-height': propsRef.fullscreen.value? '100%' : modalHeight.value > 0 ? modalHeight.value + 'px' : propsRef.contentsHeight.value,
         '--contents-bottom-position': contentsBottomPosition.value ? contentsBottomPosition.value : '0px', */
@@ -118,3 +118,3 @@
       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-height', propsRef.fullscreen.value ? '100%' : modalHeight.value > 0 ? modalHeight.value + 'px' : propsRef.contentsHeight.value);
       document.documentElement.style.setProperty('--contents-bottom-position', contentsBottomPosition.value ? contentsBottomPosition.value : '0px');
@@ -133,3 +133,2 @@ };
       context.emit('update:modelValue', false);
-      /* setTimeout(init, 250) */
     };
@@ -251,9 +250,3 @@
         class: "modal-contents",
-        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'
-        }),
+        style: vue.normalizeStyle(_ctx.styles),
         onTouchstart: _cache[2] || (_cache[2] = function () {
@@ -270,8 +263,10 @@ return _ctx.touchStart && _ctx.touchStart.apply(_ctx, arguments);
         key: 0,
-        class: "modal-contents-chip",
-        style: vue.normalizeStyle("\n            --tip-color: ".concat(_ctx.tipColor, ";\n          ")),
+        class: "modal-contents-chip-wrapper",
         onMousedown: _cache[1] || (_cache[1] = function () {
           return _ctx.mouseDown && _ctx.mouseDown.apply(_ctx, arguments);
         })
-      }, 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)];
+      }, [vue.createElementVNode("div", {
+        class: "modal-contents-chip",
+        style: vue.normalizeStyle("\n              --tip-color: ".concat(_ctx.tipColor, ";\n            "))
+      }, null, 4)], 32)) : vue.createCommentVNode("", true), vue.renderSlot(_ctx.$slots, "default")], 36)) : vue.createCommentVNode("", true)];
     }),
@@ -307,3 +302,3 @@ _: 3
   }
-}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}";
+}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-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}";
 styleInject(css_248z);script.render = render;// 重複して読み込まないようにする
@@ -310,0 +305,0 @@ var install = function install(Vue) {

package.json

 {
   "name": "@takuma-ru/vue-swipe-modal",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "private": false,
@@ -5,0 +5,0 @@ "description": "",

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

51775

decreased by-1.97%

Lines of code

603

decreased by-1.79%

No dependency changes