diff --git a/dist/VueFinalModal.esm.js b/dist/VueFinalModal.esm.js
index 20463634..33ce2562 100644
--- a/dist/VueFinalModal.esm.js
+++ b/dist/VueFinalModal.esm.js
@@ -1,2 +1,2 @@
-function e(t){return(e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(t)}function t(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function n(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);t&&(i=i.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,i)}return n}function o(e){for(var t=1;t<arguments.length;t++){var o=null!=arguments[t]?arguments[t]:{};t%2?i(Object(o),!0).forEach((function(t){n(e,t,o[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(o)):i(Object(o)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(o,t))}))}return e}function r(e){return function(e){if(Array.isArray(e))return a(e)}(e)||function(e){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e))return Array.from(e)}(e)||function(e,t){if(!e)return;if("string"==typeof e)return a(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return a(e,t)}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function a(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,i=new Array(t);n<t;n++)i[n]=e[n];return i}var s=function(e){return function(e,t){return r(e.querySelectorAll(t)||[])}(e,'button:not([disabled]), select:not([disabled]), a[href]:not([disabled]), area[href]:not([disabled]), [contentEditable=""]:not([disabled]), [contentEditable="true"]:not([disabled]), [contentEditable="TRUE"]:not([disabled]), textarea:not([disabled]), iframe:not([disabled]), input:not([disabled]), summary:not([disabled]), [tabindex]:not([tabindex="-1"])')},l=function(e){return e==document.activeElement},c=function(){function e(){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.root=null,this.elements=[],this.onKeyDown=this.onKeyDown.bind(this),this.enable=this.enable.bind(this),this.disable=this.disable.bind(this),this.firstElement=this.firstElement.bind(this),this.lastElement=this.lastElement.bind(this)}var n,i,o;return n=e,(i=[{key:"lastElement",value:function(){return this.elements[this.elements.length-1]||null}},{key:"firstElement",value:function(){return this.elements[0]||null}},{key:"onKeyDown",value:function(e){if(function(e){return"Tab"===e.key||9===e.keyCode}(e)){if(!e.shiftKey)return!document.activeElement||l(this.lastElement())?(this.firstElement().focus(),void e.preventDefault()):void 0;l(this.firstElement())&&(this.lastElement().focus(),e.preventDefault())}}},{key:"enabled",value:function(){return!!this.root}},{key:"enable",value:function(e){e&&(this.root=e,this.elements=s(this.root),this.root.addEventListener("keydown",this.onKeyDown))}},{key:"disable",value:function(){this.root.removeEventListener("keydown",this.onKeyDown),this.root=null}}])&&t(n.prototype,i),o&&t(n,o),e}(),u=function(e){var t=e.targetTouches?e.targetTouches[0]:e;return{x:t.clientX,y:t.clientY}},d=function(e,t,n){return"number"!=typeof e&&(e=Math.min(t,n)||t),"number"!=typeof n&&(n=Math.max(t,e)),Math.min(Math.max(t,e),n)},f=function(e){return e&&Number(e.replace(/px$/,""))||0},v={down:{pc:"mousedown",m:"touchstart"},move:{pc:"mousemove",m:"touchmove"},up:{pc:"mouseup",m:"touchend"}},h=function(e,t,n){t&&t.addEventListener(v[e].pc,n),t&&t.addEventListener(v[e].m,n,{passive:!1})},m=function(e,t,n){t&&t.removeEventListener(v[e].pc,n),t&&t.removeEventListener(v[e].m,n)},p=!1;if("undefined"!=typeof window){var y={get passive(){p=!0}};window.addEventListener("testPassive",null,y),window.removeEventListener("testPassive",null,y)}var g,b,w="undefined"!=typeof window&&window.navigator&&window.navigator.platform&&(/iP(ad|hone|od)/.test(window.navigator.platform)||"MacIntel"===window.navigator.platform&&window.navigator.maxTouchPoints>1),x=[],S=!1,E=0,T=-1,z=function(e,t){var n=!1;return function(e){for(var t=[];e;){if(t.push(e),e.classList.contains("vfm"))return t;e=e.parentElement}return t}(e).forEach((function(e){(function(e){if(!e||e.nodeType!==Node.ELEMENT_NODE)return!1;var t=window.getComputedStyle(e);return["auto","scroll"].includes(t.overflowY)&&e.scrollHeight>e.clientHeight})(e)&&function(e,t){return!(0===e.scrollTop&&t<0||e.scrollTop+e.clientHeight+t>=e.scrollHeight&&t>0)}(e,t)&&(n=!0)})),n},C=function(e){return x.some((function(){return z(e,-E)}))},O=function(e){var t=e||window.event;return!!C(t.target)||(t.touches.length>1||(t.preventDefault&&t.preventDefault(),!1))},k=function(e,t){if(e){if(!x.some((function(t){return t.targetElement===e}))){var n={targetElement:e,options:t||{}};x=[].concat(r(x),[n]),w?(e.ontouchstart=function(e){1===e.targetTouches.length&&(T=e.targetTouches[0].clientY)},e.ontouchmove=function(t){1===t.targetTouches.length&&function(e,t){E=e.targetTouches[0].clientY-T,!C(e.target)&&(t&&0===t.scrollTop&&E>0||function(e){return!!e&&e.scrollHeight-e.scrollTop<=e.clientHeight}(t)&&E<0?O(e):e.stopPropagation())}(t,e)},S||(document.addEventListener("touchmove",O,p?{passive:!1}:void 0),S=!0)):function(e){if(void 0===b){var t=!!e&&!0===e.reserveScrollBarGap,n=window.innerWidth-document.documentElement.clientWidth;if(t&&n>0){var i=parseInt(getComputedStyle(document.body).getPropertyValue("padding-right"),10);b=document.body.style.paddingRight,document.body.style.paddingRight="".concat(i+n,"px")}}void 0===g&&(g=document.body.style.overflow,document.body.style.overflow="hidden")}(t)}}else console.error("disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.")},M=function(e){e?(x=x.filter((function(t){return t.targetElement!==e})),w?(e.ontouchstart=null,e.ontouchmove=null,S&&0===x.length&&(document.removeEventListener("touchmove",O,p?{passive:!1}:void 0),S=!1)):x.length||(void 0!==b&&(document.body.style.paddingRight=b,b=void 0),void 0!==g&&(document.body.style.overflow=g,g=void 0))):console.error("enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices.")},_=function(){},$="enter",D="entering",R="leave",j="leavng";var L={type:[String,Object,Array],default:""},A={type:[Object,Array],default:function(){return{}}},N={t:"ns-resize",tr:"nesw-resize",r:"ew-resize",br:"nwse-resize",b:"ns-resize",bl:"nesw-resize",l:"ew-resize",tl:"nwse-resize"},B={props:{name:{type:String,default:null},value:{type:Boolean,default:!1},ssr:{type:Boolean,default:!0},classes:L,overlayClass:L,contentClass:L,styles:A,overlayStyle:A,contentStyle:A,lockScroll:{type:Boolean,default:!0},hideOverlay:{type:Boolean,default:!1},clickToClose:{type:Boolean,default:!0},escToClose:{type:Boolean,default:!1},preventClick:{type:Boolean,default:!1},attach:{type:null,default:!1,validator:function(t){var n=e(t);return"boolean"===n||"string"===n||t.nodeType===Node.ELEMENT_NODE}},transition:{type:[String,Object],default:"vfm"},overlayTransition:{type:[String,Object],default:"vfm"},zIndexAuto:{type:Boolean,default:!0},zIndexBase:{type:[String,Number],default:1e3},zIndex:{type:[Boolean,String,Number],default:!1},focusRetain:{type:Boolean,default:!0},focusTrap:{type:Boolean,default:!1},fitParent:{type:Boolean,default:!0},drag:{type:Boolean,default:!1},dragSelector:{type:String,default:""},keepChangedStyle:{type:Boolean,default:!1},resize:{type:Boolean,default:!1},resizeDirections:{type:Array,default:function(){return["t","tr","r","br","b","bl","l","tl"]},validator:function(e){return["t","tr","r","br","b","bl","l","tl"].filter((function(t){return-1!==e.indexOf(t)})).length===e.length}},minWidth:{type:Number,default:0},minHeight:{type:Number,default:0},maxWidth:{type:Number,default:1/0},maxHeight:{type:Number,default:1/0}},data:function(){return{modalStackIndex:null,visible:!1,visibility:{modal:!1,overlay:!1,resize:!1},overlayTransitionState:null,modalTransitionState:null,stopEvent:!1,params:{},dragResizeStyle:{},resolveToggle:_,rejectToggle:_,state:null,lastMousedownEl:null}},computed:{api:function(){return this[this.$_options.key]},isComponentReadyToBeDestroyed:function(){return(this.hideOverlay||this.overlayTransitionState===R)&&this.modalTransitionState===R},calculateZIndex:function(){return!1===this.zIndex?!!this.zIndexAuto&&+this.zIndexBase+2*(this.modalStackIndex||0):this.zIndex},bindStyle:function(){return o({},!1!==this.calculateZIndex&&{zIndex:this.calculateZIndex})},bindContentStyle:function(){var e=[this.dragResizeStyle];return Array.isArray(this.contentStyle)?e.push.apply(e,r(this.contentStyle)):e.push(this.contentStyle),e},computedTransition:function(){return"string"==typeof this.transition?{name:this.transition}:o({},this.transition)},computedOverlayTransition:function(){return"string"==typeof this.overlayTransition?{name:this.overlayTransition}:o({},this.overlayTransition)}},watch:{value:function(e){if(this.stopEvent)this.stopEvent=!1;else if(this.mounted(),!e){if(this.emitEvent("before-close",!0))return void this.rejectToggle("hide");this.close()}},lockScroll:"handleLockScroll",hideOverlay:function(e){this.value&&!e&&(this.visibility.overlay=!0)},attach:"mounted",isComponentReadyToBeDestroyed:function(e){e&&(this.visible=!1)},drag:function(e){this.visible&&(e?this.addDragDown():this.removeDragDown())},resize:function(e){this.visible&&(e?this.addResizeDown():this.removeResizeDown())},keepChangedStyle:function(e){e||(this.dragResizeStyle={})}},created:function(){this.api.modals.push(this)},mounted:function(){this.$focusTrap=new c,this.mounted()},beforeDestroy:function(){var e,t=this;this.close(),this.lockScroll&&this.$refs.vfmContainer&&M(this.$refs.vfmContainer),null==this||null===(e=this.$el)||void 0===e||e.remove();var n=this.api.modals.findIndex((function(e){return e===t}));this.api.modals.splice(n,1)},methods:{mounted:function(){var e=this;if(this.value){if(this.emitEvent("before-open",!1))return void this.rejectToggle("show");var t=this.getAttachElement();if(t||!1===this.attach){!1!==this.attach&&t.appendChild(this.$el);var n=this.api.openedModals.findIndex((function(t){return t===e}));-1!==n&&this.api.openedModals.splice(n,1),this.api.openedModals.push(this),this.modalStackIndex=this.api.openedModals.length-1,this.handleLockScroll(),this.api.openedModals.filter((function(t){return t!==e})).forEach((function(e,n){e.getAttachElement()===t&&(e.modalStackIndex=n,e.visibility.overlay=!1)})),this.visible=!0,this.$nextTick((function(){e.startTransitionEnter()}))}else!1!==t&&console.warn("Unable to locate target ".concat(this.attach))}},close:function(){var e=this,t=this.api.openedModals.findIndex((function(t){return t===e}));if(-1!==t&&this.api.openedModals.splice(t,1),this.api.openedModals.length>0){var n=this.api.openedModals[this.api.openedModals.length-1];(n.focusRetain||n.focusTrap)&&n.$refs.vfmContainer.focus(),!n.hideOverlay&&(n.visibility.overlay=!0)}this.drag&&this.removeDragDown(),this.resize&&this.removeResizeDown(),this.state=null,this.startTransitionLeave()},startTransitionEnter:function(){this.visibility.overlay=!0,this.visibility.modal=!0},startTransitionLeave:function(){this.visibility.overlay=!1,this.visibility.modal=!1},handleLockScroll:function(){var e=this;this.value&&this.$nextTick((function(){e.lockScroll?k(e.$refs.vfmContainer,{reserveScrollBarGap:!0}):M(e.$refs.vfmContainer)}))},getAttachElement:function(){return!1!==this.attach&&("string"==typeof this.attach?!!window&&window.document.querySelector(this.attach):this.attach)},beforeOverlayEnter:function(){this.overlayTransitionState=D},afterOverlayEnter:function(){this.overlayTransitionState=$},beforeOverlayLeave:function(){this.overlayTransitionState=j},afterOverlayLeave:function(){this.overlayTransitionState=R},beforeModalEnter:function(){this.modalTransitionState=D},afterModalEnter:function(){this.modalTransitionState=$,(this.focusRetain||this.focusTrap)&&this.$refs.vfmContainer.focus(),this.focusTrap&&this.$focusTrap.enable(this.$refs.vfmContainer),this.drag&&this.addDragDown(),this.resize&&this.addResizeDown(),this.$emit("opened",this.createModalEvent({type:"opened"})),this.resolveToggle("show")},beforeModalLeave:function(){this.modalTransitionState=j,this.$focusTrap.enabled()&&this.$focusTrap.disable()},afterModalLeave:function(){this.modalTransitionState=R,this.modalStackIndex=null,this.lockScroll&&M(this.$refs.vfmContainer),this.keepChangedStyle||(this.dragResizeStyle={});var e=!1,t=this.createModalEvent({type:"closed",stop:function(){e=!0}});this.$emit("closed",t),this.resolveToggle("hide"),e||(this.params={})},onMousedown:function(e){this.lastMousedownEl=null==e?void 0:e.target},onMouseupContainer:function(){this.lastMousedownEl===this.$refs.vfmContainer&&"resize:move"!==this.state&&(this.$emit("click-outside",this.createModalEvent({type:"click-outside"})),this.clickToClose&&this.$emit("input",!1))},onEsc:function(){this.visible&&this.escToClose&&this.$emit("input",!1)},createModalEvent:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return o({ref:this},e)},emitEvent:function(e,t){var n=!1,i=this.createModalEvent({type:e,stop:function(){n=!0}});return this.$emit(e,i),!!n&&(this.stopEvent=!0,this.$emit("input",t),!0)},emitState:function(e,t,n){this.state="".concat(t,":").concat(n),this.$emit(this.state,e)},toggle:function(e,t){var n=arguments,i=this;return new Promise((function(o,r){i.resolveToggle=function(e){o(e),i.resolveToggle=_},i.rejectToggle=function(e){r(e),i.rejectToggle=_};var a="boolean"==typeof e?e:!i.value;a&&2===n.length&&(i.params=t),i.$emit("input",a)}))},pointerDown:function(e){var t=this;e.stopPropagation();var n,i="resize",a="drag",s=this.$refs,l=s.vfmContainer,c=s.vfmContent,v=e.target.getAttribute("direction");if(v)n=i;else{if(!function(e,t,n){return""===n||r(t.querySelectorAll(n)).includes(e.target)}(e,c,this.dragSelector))return;n=a}this.emitState(e,n,"start");var p,y,g,b,w=u(e),x=l.getBoundingClientRect(),S=c.getBoundingClientRect(),E="absolute"===window.getComputedStyle(c).position,T=f(this.dragResizeStyle.top),z=f(this.dragResizeStyle.left),C=function(){if(t.fitParent){var e={absolute:function(){return{minTop:0,minLeft:0,maxTop:x.height-S.height,maxLeft:x.width-S.width}},relative:function(){return{minTop:T+x.top-S.top,minLeft:z+x.left-S.left,maxTop:T+x.bottom-S.bottom,maxLeft:z+x.right-S.right}}};return E?e.absolute():e.relative()}return{}}(),O=n===i&&(p=document.body,y="cursor",g=N[v],b=p.style[y],p.style[y]=g,function(){p.style[y]=b}),k=function(e){e.stopPropagation(),t.emitState(e,n,"move");var r,s,l=u(e),c={x:l.x-w.x,y:l.y-w.y};n===i&&(c=t.getResizeOffset(v,c,x,S,E)),E?(r=S.top-x.top+c.y,s=S.left-x.left+c.x):(r=T+c.y,s=z+c.x),n===a&&t.fitParent&&(r=d(C.minTop,r,C.maxTop),s=d(C.minLeft,s,C.maxLeft));var f=o(o(o({position:"relative",top:r+"px",left:s+"px",margin:"unset",touchAction:"none"},E&&{position:"absolute",transform:"unset",width:S.width+"px",height:S.height+"px"}),c.width&&{width:c.width+"px"}),c.height&&{height:c.height+"px"});t.dragResizeStyle=o(o({},t.dragResizeStyle),f)};h("move",document,k),h("up",document,(function e(o){o.stopPropagation(),n===i&&O&&O(),setTimeout((function(){t.emitState(o,n,"end")})),m("move",document,k),m("up",document,e)}))},addDragDown:function(){h("down",this.$refs.vfmContent,this.pointerDown),this.dragResizeStyle.touchAction="none"},removeDragDown:function(){m("down",this.$refs.vfmContent,this.pointerDown)},addResizeDown:function(){var e=this;this.visibility.resize=!0,this.$nextTick((function(){h("down",e.$refs.vfmResize,e.pointerDown)}))},removeResizeDown:function(){m("down",this.$refs.vfmResize,this.pointerDown),this.visibility.resize=!1},getResizeOffset:function(e,t,i,a,s){var l=this,c=function(e,t,n,o){var r,s=a[t],c=i[e]-a[e],u=(r=t).charAt(0).toUpperCase()+r.slice(1);return{axis:n,edgeName:t,min:o?c:-s,max:o?s:c,minEdge:l["min".concat(u)],maxEdge:l["max".concat(u)],getEdge:function(e){return a[t]-e*(o?1:-1)},getOffsetAxis:function(e,n){var i=a[t]-e;return n?o?i:0:(o?1:-1)*i/2}}},u={t:["top","height","y",!0],b:["bottom","height","y",!1],l:["left","width","x",!0],r:["right","width","x",!1]},f={x:0,y:0};return e.split("").forEach((function(e){var i=c.apply(void 0,r(u[e]));f=o(o({},f),function(e){var i,o=t[e.axis];o=l.fitParent?d(e.min,o,e.max):o;var r=d(e.minEdge,e.getEdge(o),e.maxEdge);return o=e.getOffsetAxis(r,s),n(i={},e.edgeName,r),n(i,e.axis,o),i}(i))})),f}}};var P,I=function(e,t,n,i,o,r,a,s,l,c){"boolean"!=typeof a&&(l=s,s=a,a=!1);var u,d="function"==typeof n?n.options:n;if(e&&e.render&&(d.render=e.render,d.staticRenderFns=e.staticRenderFns,d._compiled=!0,o&&(d.functional=!0)),i&&(d._scopeId=i),r?(u=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),t&&t.call(this,l(e)),e&&e._registeredComponents&&e._registeredComponents.add(r)},d._ssrRegister=u):t&&(u=a?function(e){t.call(this,c(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,s(e))}),u)if(d.functional){var f=d.render;d.render=function(e,t){return u.call(t),f(e,t)}}else{var v=d.beforeCreate;d.beforeCreate=v?[].concat(v,u):[u]}return n},H="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());var U={};var F=I({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return e.ssr||e.visible?n("div",{directives:[{name:"show",rawName:"v-show",value:!e.ssr||e.visible,expression:"!ssr || visible"}],staticClass:"vfm vfm--inset",class:[!1===e.attach?"vfm--fixed":"vfm--absolute",{"vfm--prevent-none":e.preventClick}],style:e.bindStyle,on:{keydown:function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"esc",27,t.key,["Esc","Escape"])?null:e.onEsc(t)}}},[n("transition",e._b({ref:"vfmOverlayTransition",on:{"before-enter":e.beforeOverlayEnter,"after-enter":e.afterOverlayEnter,"before-leave":e.beforeOverlayLeave,"after-leave":e.afterOverlayLeave}},"transition",e.computedOverlayTransition,!1),[n("div",{directives:[{name:"show",rawName:"v-show",value:!e.hideOverlay&&e.visibility.overlay,expression:"!hideOverlay && visibility.overlay"}],staticClass:"vfm__overlay vfm--overlay vfm--absolute vfm--inset",class:e.overlayClass,style:e.overlayStyle})]),e._v(" "),n("transition",e._b({ref:"vfmTransition",on:{"before-enter":e.beforeModalEnter,"after-enter":e.afterModalEnter,"before-leave":e.beforeModalLeave,"after-leave":e.afterModalLeave}},"transition",e.computedTransition,!1),[n("div",{directives:[{name:"show",rawName:"v-show",value:e.visibility.modal,expression:"visibility.modal"}],ref:"vfmContainer",staticClass:"vfm__container vfm--absolute vfm--inset vfm--outline-none",class:e.classes,style:e.styles,attrs:{"aria-expanded":e.visibility.modal.toString(),role:"dialog","aria-modal":"true",tabindex:"-1"},on:{mouseup:function(t){return t.target!==t.currentTarget?null:e.onMouseupContainer(t)},mousedown:function(t){return t.target!==t.currentTarget?null:e.onMousedown(t)}}},[n("div",{ref:"vfmContent",staticClass:"vfm__content",class:[e.contentClass,{"vfm--prevent-auto":e.preventClick}],style:e.bindContentStyle,on:{mousedown:function(t){return e.onMousedown(null)}}},[e._t("default",null,{params:e.params,close:function(){return e.$emit("input",!1)}}),e._v(" "),e.visibility.resize&&e.visibility.modal?n("div",{ref:"vfmResize",staticClass:"vfm__resize vfm--absolute vfm--inset vfm--prevent-none vfm--select-none vfm--touch-none"},e._l(e.resizeDirections,(function(e){return n("div",{key:e,staticClass:"vfm--absolute vfm--prevent-auto",class:"vfm--resize-"+e,attrs:{direction:e}})})),0):e._e()],2)])])],1):e._e()},staticRenderFns:[]},(function(e){e&&e("data-v-8fe8c8ee_0",{source:".vfm--fixed[data-v-8fe8c8ee]{position:fixed}.vfm--absolute[data-v-8fe8c8ee]{position:absolute}.vfm--inset[data-v-8fe8c8ee]{top:0;right:0;bottom:0;left:0}.vfm--overlay[data-v-8fe8c8ee]{background-color:rgba(0,0,0,.5)}.vfm--prevent-none[data-v-8fe8c8ee]{pointer-events:none}.vfm--prevent-auto[data-v-8fe8c8ee]{pointer-events:auto}.vfm--outline-none[data-v-8fe8c8ee]:focus{outline:0}.vfm-enter-active[data-v-8fe8c8ee],.vfm-leave-active[data-v-8fe8c8ee]{transition:opacity .2s}.vfm-enter[data-v-8fe8c8ee],.vfm-leave-to[data-v-8fe8c8ee]{opacity:0}.vfm--touch-none[data-v-8fe8c8ee]{touch-action:none}.vfm--select-none[data-v-8fe8c8ee]{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vfm--resize-bl[data-v-8fe8c8ee],.vfm--resize-br[data-v-8fe8c8ee],.vfm--resize-tl[data-v-8fe8c8ee],.vfm--resize-tr[data-v-8fe8c8ee]{width:12px;height:12px;z-index:10}.vfm--resize-t[data-v-8fe8c8ee]{top:-6px;left:0;width:100%;height:12px;cursor:ns-resize}.vfm--resize-tr[data-v-8fe8c8ee]{top:-6px;right:-6px;cursor:nesw-resize}.vfm--resize-r[data-v-8fe8c8ee]{top:0;right:-6px;width:12px;height:100%;cursor:ew-resize}.vfm--resize-br[data-v-8fe8c8ee]{bottom:-6px;right:-6px;cursor:nwse-resize}.vfm--resize-b[data-v-8fe8c8ee]{bottom:-6px;left:0;width:100%;height:12px;cursor:ns-resize}.vfm--resize-bl[data-v-8fe8c8ee]{bottom:-6px;left:-6px;cursor:nesw-resize}.vfm--resize-l[data-v-8fe8c8ee]{top:0;left:-6px;width:12px;height:100%;cursor:ew-resize}.vfm--resize-tl[data-v-8fe8c8ee]{top:-6px;left:-6px;cursor:nwse-resize}",map:void 0,media:void 0})}),B,"data-v-8fe8c8ee",false,undefined,!1,(function(e){return function(e,t){return function(e,t){var n=H?t.media||"default":e,i=U[n]||(U[n]={ids:new Set,styles:[]});if(!i.ids.has(e)){i.ids.add(e);var o=t.source;if(t.map&&(o+="\n/*# sourceURL="+t.map.sources[0]+" */",o+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(t.map))))+" */"),i.element||(i.element=document.createElement("style"),i.element.type="text/css",t.media&&i.element.setAttribute("media",t.media),void 0===P&&(P=document.head||document.getElementsByTagName("head")[0]),P.appendChild(i.element)),"styleSheet"in i.element)i.styles.push(o),i.element.styleSheet.cssText=i.styles.filter(Boolean).join("\n");else{var r=i.ids.size-1,a=document.createTextNode(o),s=i.element.childNodes;s[r]&&i.element.removeChild(s[r]),s.length?i.element.insertBefore(a,s[r]):i.element.appendChild(a)}}}(e,t)}}),void 0,void 0),K=I({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"modals-container"},e._l(e.api.dynamicModals,(function(t,i){return n(t.component,e._g(e._b({key:t.id,tag:"component",on:{closed:function(t){return e.slice(i)},"before-open":function(n){return e.beforeOpen(n,t,i)},opened:t.opened},scopedSlots:e._u([e._l(t.slots,(function(t,i){return{key:i,fn:function(){return[e.isString(t)?n("div",{key:i,domProps:{innerHTML:e._s(t)}}):n(t.component,e._g(e._b({key:i,tag:"component"},"component",t.bind,!1),t.on))]},proxy:!0}}))],null,!0),model:{value:t.value,callback:function(n){e.$set(t,"value",n)},expression:"modal.value"}},"component",t.bind,!1),t.on))})),1)},staticRenderFns:[]},undefined,{props:{},computed:{api:function(){return this[this.$_options.key]}},methods:{slice:function(e){this.api.dynamicModals.splice(e,1)},beforeOpen:function(e,t,n){var i=this;e.ref.params=t.params,this.$nextTick((function(){t.value||(i.slice(n),t.reject("show"))}))},isString:function(e){return"string"==typeof e}}},undefined,false,undefined,!1,void 0,void 0,void 0);function V(e,t){var n=o({},e);return Object.assign(n.props,{$_options:{type:Object,default:function(){return t}}}),n}function W(t,n){var i=function(t,n){var i;return function(){return i={show:function(t){for(var i=this,o=arguments.length,r=new Array(o>1?o-1:0),a=1;a<o;a++)r[a-1]=arguments[a];switch(e(t)){case"string":return this.toggle.apply(this,[t,!0].concat(r));case"object":return Promise.allSettled([new Promise((function(e,o){var a={value:!0,id:Symbol("dynamicModal"),component:n.componentName,bind:{},slots:{},on:{},params:r[0],reject:o,opened:function(){e("show")}};i.dynamicModals.push(Object.assign(a,t))}))])}},hide:function(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];return this.toggle(t,!1)},hideAll:function(){return this.hide.apply(this,r(this.openedModals.map((function(e){return e.name}))))},toggle:function(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),i=1;i<t;i++)n[i-1]=arguments[i];var o=Array.isArray(e)?this.get.apply(this,r(e)):this.get(e);return Promise.allSettled(o.map((function(e){return e.toggle.apply(e,n)})))},get:function(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];return this.modals.filter((function(e){return t.includes(e.name)}))},dynamicModals:[],openedModals:[],modals:[]},t.observable(i)}}(t,n)();Object.defineProperty(t.prototype,n.key,{get:function(){return i}})}var Y={componentName:"VueFinalModal",dynamicContainerName:"ModalsContainer",key:"$vfm"};export default function(e){return{install:function(t,n){var i=Object.assign({},Y,e,n);(function(e,t,n){return!(e||t||n)||("undefined"==typeof window||(e&&console.error("[vue-final-modal] Duplicate registration API key of VueFinalModal."),t&&console.error("[vue-final-modal] Duplicate registration componentName of VueFinalModal."),n&&console.error("[vue-final-modal] Duplicate registration dynamicContainerName of ModalsContainer.")),!1)})(t.prototype[i.key],t.options.components[i.componentName],t.options.components[i.dynamicContainerName])&&(W(t,i),function(e,t){e.component(t.componentName,V(F,t))}(t,i),function(e,t){e.component(t.dynamicContainerName,V(K,t))}(t,i))}}}
+import e from"vue";function t(e){return(t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function n(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function i(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);t&&(i=i.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,i)}return n}function r(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?o(Object(n),!0).forEach((function(t){i(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):o(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function a(e){return function(e){if(Array.isArray(e))return s(e)}(e)||function(e){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e))return Array.from(e)}(e)||function(e,t){if(!e)return;if("string"==typeof e)return s(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return s(e,t)}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function s(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,i=new Array(t);n<t;n++)i[n]=e[n];return i}var l=function(e){return function(e,t){return a(e.querySelectorAll(t)||[])}(e,'button:not([disabled]), select:not([disabled]), a[href]:not([disabled]), area[href]:not([disabled]), [contentEditable=""]:not([disabled]), [contentEditable="true"]:not([disabled]), [contentEditable="TRUE"]:not([disabled]), textarea:not([disabled]), iframe:not([disabled]), input:not([disabled]), summary:not([disabled]), [tabindex]:not([tabindex="-1"])')},c=function(e){return e==document.activeElement},u=function(){function e(){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.root=null,this.elements=[],this.onKeyDown=this.onKeyDown.bind(this),this.enable=this.enable.bind(this),this.disable=this.disable.bind(this),this.firstElement=this.firstElement.bind(this),this.lastElement=this.lastElement.bind(this)}var t,i,o;return t=e,(i=[{key:"lastElement",value:function(){return this.elements[this.elements.length-1]||null}},{key:"firstElement",value:function(){return this.elements[0]||null}},{key:"onKeyDown",value:function(e){if(function(e){return"Tab"===e.key||9===e.keyCode}(e)){if(!e.shiftKey)return!document.activeElement||c(this.lastElement())?(this.firstElement().focus(),void e.preventDefault()):void 0;c(this.firstElement())&&(this.lastElement().focus(),e.preventDefault())}}},{key:"enabled",value:function(){return!!this.root}},{key:"enable",value:function(e){e&&(this.root=e,this.elements=l(this.root),this.root.addEventListener("keydown",this.onKeyDown))}},{key:"disable",value:function(){this.root.removeEventListener("keydown",this.onKeyDown),this.root=null}}])&&n(t.prototype,i),o&&n(t,o),e}(),d=function(e){var t=e.targetTouches?e.targetTouches[0]:e;return{x:t.clientX,y:t.clientY}},f=function(e,t,n){return"number"!=typeof e&&(e=Math.min(t,n)||t),"number"!=typeof n&&(n=Math.max(t,e)),Math.min(Math.max(t,e),n)},v=function(e){return e&&Number(e.replace(/px$/,""))||0},h={down:{pc:"mousedown",m:"touchstart"},move:{pc:"mousemove",m:"touchmove"},up:{pc:"mouseup",m:"touchend"}},m=function(e,t,n){t&&t.addEventListener(h[e].pc,n),t&&t.addEventListener(h[e].m,n,{passive:!1})},p=function(e,t,n){t&&t.removeEventListener(h[e].pc,n),t&&t.removeEventListener(h[e].m,n)},y=!1;if("undefined"!=typeof window){var b={get passive(){y=!0}};window.addEventListener("testPassive",null,b),window.removeEventListener("testPassive",null,b)}var g,w,x="undefined"!=typeof window&&window.navigator&&window.navigator.platform&&(/iP(ad|hone|od)/.test(window.navigator.platform)||"MacIntel"===window.navigator.platform&&window.navigator.maxTouchPoints>1),S=[],E=!1,T=0,z=-1,C=function(e,t){var n=!1;return function(e){for(var t=[];e;){if(t.push(e),e.classList.contains("vfm"))return t;e=e.parentElement}return t}(e).forEach((function(e){(function(e){if(!e||e.nodeType!==Node.ELEMENT_NODE)return!1;var t=window.getComputedStyle(e);return["auto","scroll"].includes(t.overflowY)&&e.scrollHeight>e.clientHeight})(e)&&function(e,t){return!(0===e.scrollTop&&t<0||e.scrollTop+e.clientHeight+t>=e.scrollHeight&&t>0)}(e,t)&&(n=!0)})),n},O=function(e){return S.some((function(){return C(e,-T)}))},M=function(e){var t=e||window.event;return!!O(t.target)||(t.touches.length>1||(t.preventDefault&&t.preventDefault(),!1))},k=function(e,t){if(e){if(!S.some((function(t){return t.targetElement===e}))){var n={targetElement:e,options:t||{}};S=[].concat(a(S),[n]),x?(e.ontouchstart=function(e){1===e.targetTouches.length&&(z=e.targetTouches[0].clientY)},e.ontouchmove=function(t){1===t.targetTouches.length&&function(e,t){T=e.targetTouches[0].clientY-z,!O(e.target)&&(t&&0===t.scrollTop&&T>0||function(e){return!!e&&e.scrollHeight-e.scrollTop<=e.clientHeight}(t)&&T<0?M(e):e.stopPropagation())}(t,e)},E||(document.addEventListener("touchmove",M,y?{passive:!1}:void 0),E=!0)):function(e){if(void 0===w){var t=!!e&&!0===e.reserveScrollBarGap,n=window.innerWidth-document.documentElement.clientWidth;if(t&&n>0){var i=parseInt(getComputedStyle(document.body).getPropertyValue("padding-right"),10);w=document.body.style.paddingRight,document.body.style.paddingRight="".concat(i+n,"px")}}void 0===g&&(g=document.body.style.overflow,document.body.style.overflow="hidden")}(t)}}else console.error("disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.")},_=function(e){e?(S=S.filter((function(t){return t.targetElement!==e})),x?(e.ontouchstart=null,e.ontouchmove=null,E&&0===S.length&&(document.removeEventListener("touchmove",M,y?{passive:!1}:void 0),E=!1)):S.length||(void 0!==w&&(document.body.style.paddingRight=w,w=void 0),void 0!==g&&(document.body.style.overflow=g,g=void 0))):console.error("enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices.")},D=function(){},$="enter",R="entering",L="leave",j="leavng";var A={type:[String,Object,Array],default:""},B={type:[Object,Array],default:function(){return{}}},I={t:"ns-resize",tr:"nesw-resize",r:"ew-resize",br:"nwse-resize",b:"ns-resize",bl:"nesw-resize",l:"ew-resize",tl:"nwse-resize"},P={props:{name:{type:String,default:null},value:{type:Boolean,default:!1},ssr:{type:Boolean,default:!0},classes:A,overlayClass:A,contentClass:A,styles:B,overlayStyle:B,contentStyle:B,lockScroll:{type:Boolean,default:!0},hideOverlay:{type:Boolean,default:!1},clickToClose:{type:Boolean,default:!0},escToClose:{type:Boolean,default:!1},preventClick:{type:Boolean,default:!1},attach:{type:null,default:!1,validator:function(e){var n=t(e);return"boolean"===n||"string"===n||e.nodeType===Node.ELEMENT_NODE}},transition:{type:[String,Object],default:"vfm"},overlayTransition:{type:[String,Object],default:"vfm"},zIndexAuto:{type:Boolean,default:!0},zIndexBase:{type:[String,Number],default:1e3},zIndex:{type:[Boolean,String,Number],default:!1},focusRetain:{type:Boolean,default:!0},focusTrap:{type:Boolean,default:!1},fitParent:{type:Boolean,default:!0},drag:{type:Boolean,default:!1},dragSelector:{type:String,default:""},keepChangedStyle:{type:Boolean,default:!1},resize:{type:Boolean,default:!1},resizeDirections:{type:Array,default:function(){return["t","tr","r","br","b","bl","l","tl"]},validator:function(e){return["t","tr","r","br","b","bl","l","tl"].filter((function(t){return-1!==e.indexOf(t)})).length===e.length}},minWidth:{type:Number,default:0},minHeight:{type:Number,default:0},maxWidth:{type:Number,default:1/0},maxHeight:{type:Number,default:1/0}},data:function(){return{modalStackIndex:null,visible:!1,visibility:{modal:!1,overlay:!1,resize:!1},overlayTransitionState:null,modalTransitionState:null,stopEvent:!1,params:{},dragResizeStyle:{},resolveToggle:D,rejectToggle:D,state:null,lastMousedownEl:null}},computed:{isComponentReadyToBeDestroyed:function(){return(this.hideOverlay||this.overlayTransitionState===L)&&this.modalTransitionState===L},calculateZIndex:function(){return!1===this.zIndex?!!this.zIndexAuto&&+this.zIndexBase+2*(this.modalStackIndex||0):this.zIndex},bindStyle:function(){return r({},!1!==this.calculateZIndex&&{zIndex:this.calculateZIndex})},bindContentStyle:function(){var e=[this.dragResizeStyle];return Array.isArray(this.contentStyle)?e.push.apply(e,a(this.contentStyle)):e.push(this.contentStyle),e},computedTransition:function(){return"string"==typeof this.transition?{name:this.transition}:r({},this.transition)},computedOverlayTransition:function(){return"string"==typeof this.overlayTransition?{name:this.overlayTransition}:r({},this.overlayTransition)}},watch:{value:function(e){if(this.stopEvent)this.stopEvent=!1;else if(this.mounted(),!e){if(this.emitEvent("before-close",!0))return void this.rejectToggle("hide");this.close()}},lockScroll:"handleLockScroll",hideOverlay:function(e){this.value&&!e&&(this.visibility.overlay=!0)},attach:"mounted",isComponentReadyToBeDestroyed:function(e){e&&(this.visible=!1)},drag:function(e){this.visible&&(e?this.addDragDown():this.removeDragDown())},resize:function(e){this.visible&&(e?this.addResizeDown():this.removeResizeDown())},keepChangedStyle:function(e){e||(this.dragResizeStyle={})}},created:function(){this.api.modals.push(this)},mounted:function(){this.$focusTrap=new u,this.mounted()},beforeDestroy:function(){var e,t=this;this.close(),this.lockScroll&&this.$refs.vfmContainer&&_(this.$refs.vfmContainer),null==this||null===(e=this.$el)||void 0===e||e.remove();var n=this.api.modals.findIndex((function(e){return e===t}));this.api.modals.splice(n,1)},methods:{mounted:function(){var e=this;if(this.value){if(this.emitEvent("before-open",!1))return void this.rejectToggle("show");var t=this.getAttachElement();if(t||!1===this.attach){!1!==this.attach&&t.appendChild(this.$el);var n=this.api.openedModals.findIndex((function(t){return t===e}));-1!==n&&this.api.openedModals.splice(n,1),this.api.openedModals.push(this),this.modalStackIndex=this.api.openedModals.length-1,this.handleLockScroll(),this.api.openedModals.filter((function(t){return t!==e})).forEach((function(e,n){e.getAttachElement()===t&&(e.modalStackIndex=n,e.visibility.overlay=!1)})),this.visible=!0,this.$nextTick((function(){e.startTransitionEnter()}))}else!1!==t&&console.warn("Unable to locate target ".concat(this.attach))}},close:function(){var e=this,t=this.api.openedModals.findIndex((function(t){return t===e}));if(-1!==t&&this.api.openedModals.splice(t,1),this.api.openedModals.length>0){var n=this.api.openedModals[this.api.openedModals.length-1];(n.focusRetain||n.focusTrap)&&n.$refs.vfmContainer.focus(),!n.hideOverlay&&(n.visibility.overlay=!0)}this.drag&&this.removeDragDown(),this.resize&&this.removeResizeDown(),this.state=null,this.startTransitionLeave()},startTransitionEnter:function(){this.visibility.overlay=!0,this.visibility.modal=!0},startTransitionLeave:function(){this.visibility.overlay=!1,this.visibility.modal=!1},handleLockScroll:function(){var e=this;this.value&&this.$nextTick((function(){e.lockScroll?k(e.$refs.vfmContainer,{reserveScrollBarGap:!0}):_(e.$refs.vfmContainer)}))},getAttachElement:function(){return!1!==this.attach&&("string"==typeof this.attach?!!window&&window.document.querySelector(this.attach):this.attach)},beforeOverlayEnter:function(){this.overlayTransitionState=R},afterOverlayEnter:function(){this.overlayTransitionState=$},beforeOverlayLeave:function(){this.overlayTransitionState=j},afterOverlayLeave:function(){this.overlayTransitionState=L},beforeModalEnter:function(){this.modalTransitionState=R},afterModalEnter:function(){this.modalTransitionState=$,(this.focusRetain||this.focusTrap)&&this.$refs.vfmContainer.focus(),this.focusTrap&&this.$focusTrap.enable(this.$refs.vfmContainer),this.drag&&this.addDragDown(),this.resize&&this.addResizeDown(),this.$emit("opened",this.createModalEvent({type:"opened"})),this.resolveToggle("show")},beforeModalLeave:function(){this.modalTransitionState=j,this.$focusTrap.enabled()&&this.$focusTrap.disable()},afterModalLeave:function(){this.modalTransitionState=L,this.modalStackIndex=null,this.lockScroll&&_(this.$refs.vfmContainer),this.keepChangedStyle||(this.dragResizeStyle={});var e=!1,t=this.createModalEvent({type:"closed",stop:function(){e=!0}});this.$emit("closed",t),this.resolveToggle("hide"),e||(this.params={})},onMousedown:function(e){this.lastMousedownEl=null==e?void 0:e.target},onMouseupContainer:function(){this.lastMousedownEl===this.$refs.vfmContainer&&"resize:move"!==this.state&&(this.$emit("click-outside",this.createModalEvent({type:"click-outside"})),this.clickToClose&&this.$emit("input",!1))},onEsc:function(){this.visible&&this.escToClose&&this.$emit("input",!1)},createModalEvent:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return r({ref:this},e)},emitEvent:function(e,t){var n=!1,i=this.createModalEvent({type:e,stop:function(){n=!0}});return this.$emit(e,i),!!n&&(this.stopEvent=!0,this.$emit("input",t),!0)},emitState:function(e,t,n){this.state="".concat(t,":").concat(n),this.$emit(this.state,e)},toggle:function(e,t){var n=arguments,i=this;return new Promise((function(o,r){i.resolveToggle=function(e){o(e),i.resolveToggle=D},i.rejectToggle=function(e){r(e),i.rejectToggle=D};var a="boolean"==typeof e?e:!i.value;a&&2===n.length&&(i.params=t),i.$emit("input",a)}))},pointerDown:function(e){var t=this;e.stopPropagation();var n,i="resize",o="drag",s=this.$refs,l=s.vfmContainer,c=s.vfmContent,u=e.target.getAttribute("direction");if(u)n=i;else{if(!function(e,t,n){return""===n||a(t.querySelectorAll(n)).includes(e.target)}(e,c,this.dragSelector))return;n=o}this.emitState(e,n,"start");var h,y,b,g,w=d(e),x=l.getBoundingClientRect(),S=c.getBoundingClientRect(),E="absolute"===window.getComputedStyle(c).position,T=v(this.dragResizeStyle.top),z=v(this.dragResizeStyle.left),C=function(){if(t.fitParent){var e={absolute:function(){return{minTop:0,minLeft:0,maxTop:x.height-S.height,maxLeft:x.width-S.width}},relative:function(){return{minTop:T+x.top-S.top,minLeft:z+x.left-S.left,maxTop:T+x.bottom-S.bottom,maxLeft:z+x.right-S.right}}};return E?e.absolute():e.relative()}return{}}(),O=n===i&&(h=document.body,y="cursor",b=I[u],g=h.style[y],h.style[y]=b,function(){h.style[y]=g}),M=function(e){e.stopPropagation(),t.emitState(e,n,"move");var a,s,l=d(e),c={x:l.x-w.x,y:l.y-w.y};n===i&&(c=t.getResizeOffset(u,c,x,S,E)),E?(a=S.top-x.top+c.y,s=S.left-x.left+c.x):(a=T+c.y,s=z+c.x),n===o&&t.fitParent&&(a=f(C.minTop,a,C.maxTop),s=f(C.minLeft,s,C.maxLeft));var v=r(r(r({position:"relative",top:a+"px",left:s+"px",margin:"unset",touchAction:"none"},E&&{position:"absolute",transform:"unset",width:S.width+"px",height:S.height+"px"}),c.width&&{width:c.width+"px"}),c.height&&{height:c.height+"px"});t.dragResizeStyle=r(r({},t.dragResizeStyle),v)};m("move",document,M),m("up",document,(function e(o){o.stopPropagation(),n===i&&O&&O(),setTimeout((function(){t.emitState(o,n,"end")})),p("move",document,M),p("up",document,e)}))},addDragDown:function(){m("down",this.$refs.vfmContent,this.pointerDown),this.dragResizeStyle.touchAction="none"},removeDragDown:function(){p("down",this.$refs.vfmContent,this.pointerDown)},addResizeDown:function(){var e=this;this.visibility.resize=!0,this.$nextTick((function(){m("down",e.$refs.vfmResize,e.pointerDown)}))},removeResizeDown:function(){p("down",this.$refs.vfmResize,this.pointerDown),this.visibility.resize=!1},getResizeOffset:function(e,t,n,o,s){var l=this,c=function(e,t,i,r){var a,s=o[t],c=n[e]-o[e],u=(a=t).charAt(0).toUpperCase()+a.slice(1);return{axis:i,edgeName:t,min:r?c:-s,max:r?s:c,minEdge:l["min".concat(u)],maxEdge:l["max".concat(u)],getEdge:function(e){return o[t]-e*(r?1:-1)},getOffsetAxis:function(e,n){var i=o[t]-e;return n?r?i:0:(r?1:-1)*i/2}}},u={t:["top","height","y",!0],b:["bottom","height","y",!1],l:["left","width","x",!0],r:["right","width","x",!1]},d={x:0,y:0};return e.split("").forEach((function(e){var n=c.apply(void 0,a(u[e]));d=r(r({},d),function(e){var n,o=t[e.axis];o=l.fitParent?f(e.min,o,e.max):o;var r=f(e.minEdge,e.getEdge(o),e.maxEdge);return o=e.getOffsetAxis(r,s),i(n={},e.edgeName,r),i(n,e.axis,o),n}(n))})),d}}};var N,V=function(e,t,n,i,o,r,a,s,l,c){"boolean"!=typeof a&&(l=s,s=a,a=!1);var u,d="function"==typeof n?n.options:n;if(e&&e.render&&(d.render=e.render,d.staticRenderFns=e.staticRenderFns,d._compiled=!0,o&&(d.functional=!0)),i&&(d._scopeId=i),r?(u=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),t&&t.call(this,l(e)),e&&e._registeredComponents&&e._registeredComponents.add(r)},d._ssrRegister=u):t&&(u=a?function(e){t.call(this,c(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,s(e))}),u)if(d.functional){var f=d.render;d.render=function(e,t){return u.call(t),f(e,t)}}else{var v=d.beforeCreate;d.beforeCreate=v?[].concat(v,u):[u]}return n},H="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());var U={};var K=V({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return e.ssr||e.visible?n("div",{directives:[{name:"show",rawName:"v-show",value:!e.ssr||e.visible,expression:"!ssr || visible"}],staticClass:"vfm vfm--inset",class:[!1===e.attach?"vfm--fixed":"vfm--absolute",{"vfm--prevent-none":e.preventClick}],style:e.bindStyle,on:{keydown:function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"esc",27,t.key,["Esc","Escape"])?null:e.onEsc(t)}}},[n("transition",e._b({ref:"vfmOverlayTransition",on:{"before-enter":e.beforeOverlayEnter,"after-enter":e.afterOverlayEnter,"before-leave":e.beforeOverlayLeave,"after-leave":e.afterOverlayLeave}},"transition",e.computedOverlayTransition,!1),[n("div",{directives:[{name:"show",rawName:"v-show",value:!e.hideOverlay&&e.visibility.overlay,expression:"!hideOverlay && visibility.overlay"}],staticClass:"vfm__overlay vfm--overlay vfm--absolute vfm--inset",class:e.overlayClass,style:e.overlayStyle})]),e._v(" "),n("transition",e._b({ref:"vfmTransition",on:{"before-enter":e.beforeModalEnter,"after-enter":e.afterModalEnter,"before-leave":e.beforeModalLeave,"after-leave":e.afterModalLeave}},"transition",e.computedTransition,!1),[n("div",{directives:[{name:"show",rawName:"v-show",value:e.visibility.modal,expression:"visibility.modal"}],ref:"vfmContainer",staticClass:"vfm__container vfm--absolute vfm--inset vfm--outline-none",class:e.classes,style:e.styles,attrs:{"aria-expanded":e.visibility.modal.toString(),role:"dialog","aria-modal":"true",tabindex:"-1"},on:{mouseup:function(t){return t.target!==t.currentTarget?null:e.onMouseupContainer(t)},mousedown:function(t){return t.target!==t.currentTarget?null:e.onMousedown(t)}}},[n("div",{ref:"vfmContent",staticClass:"vfm__content",class:[e.contentClass,{"vfm--prevent-auto":e.preventClick}],style:e.bindContentStyle,on:{mousedown:function(t){return e.onMousedown(null)}}},[e._t("default",null,{params:e.params,close:function(){return e.$emit("input",!1)}}),e._v(" "),e.visibility.resize&&e.visibility.modal?n("div",{ref:"vfmResize",staticClass:"vfm__resize vfm--absolute vfm--inset vfm--prevent-none vfm--select-none vfm--touch-none"},e._l(e.resizeDirections,(function(e){return n("div",{key:e,staticClass:"vfm--absolute vfm--prevent-auto",class:"vfm--resize-"+e,attrs:{direction:e}})})),0):e._e()],2)])])],1):e._e()},staticRenderFns:[]},(function(e){e&&e("data-v-74b699c6_0",{source:".vfm--fixed[data-v-74b699c6]{position:fixed}.vfm--absolute[data-v-74b699c6]{position:absolute}.vfm--inset[data-v-74b699c6]{top:0;right:0;bottom:0;left:0}.vfm--overlay[data-v-74b699c6]{background-color:rgba(0,0,0,.5)}.vfm--prevent-none[data-v-74b699c6]{pointer-events:none}.vfm--prevent-auto[data-v-74b699c6]{pointer-events:auto}.vfm--outline-none[data-v-74b699c6]:focus{outline:0}.vfm-enter-active[data-v-74b699c6],.vfm-leave-active[data-v-74b699c6]{transition:opacity .2s}.vfm-enter[data-v-74b699c6],.vfm-leave-to[data-v-74b699c6]{opacity:0}.vfm--touch-none[data-v-74b699c6]{touch-action:none}.vfm--select-none[data-v-74b699c6]{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vfm--resize-bl[data-v-74b699c6],.vfm--resize-br[data-v-74b699c6],.vfm--resize-tl[data-v-74b699c6],.vfm--resize-tr[data-v-74b699c6]{width:12px;height:12px;z-index:10}.vfm--resize-t[data-v-74b699c6]{top:-6px;left:0;width:100%;height:12px;cursor:ns-resize}.vfm--resize-tr[data-v-74b699c6]{top:-6px;right:-6px;cursor:nesw-resize}.vfm--resize-r[data-v-74b699c6]{top:0;right:-6px;width:12px;height:100%;cursor:ew-resize}.vfm--resize-br[data-v-74b699c6]{bottom:-6px;right:-6px;cursor:nwse-resize}.vfm--resize-b[data-v-74b699c6]{bottom:-6px;left:0;width:100%;height:12px;cursor:ns-resize}.vfm--resize-bl[data-v-74b699c6]{bottom:-6px;left:-6px;cursor:nesw-resize}.vfm--resize-l[data-v-74b699c6]{top:0;left:-6px;width:12px;height:100%;cursor:ew-resize}.vfm--resize-tl[data-v-74b699c6]{top:-6px;left:-6px;cursor:nwse-resize}",map:void 0,media:void 0})}),P,"data-v-74b699c6",false,undefined,!1,(function(e){return function(e,t){return function(e,t){var n=H?t.media||"default":e,i=U[n]||(U[n]={ids:new Set,styles:[]});if(!i.ids.has(e)){i.ids.add(e);var o=t.source;if(t.map&&(o+="\n/*# sourceURL="+t.map.sources[0]+" */",o+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(t.map))))+" */"),i.element||(i.element=document.createElement("style"),i.element.type="text/css",t.media&&i.element.setAttribute("media",t.media),void 0===N&&(N=document.head||document.getElementsByTagName("head")[0]),N.appendChild(i.element)),"styleSheet"in i.element)i.styles.push(o),i.element.styleSheet.cssText=i.styles.filter(Boolean).join("\n");else{var r=i.ids.size-1,a=document.createTextNode(o),s=i.element.childNodes;s[r]&&i.element.removeChild(s[r]),s.length?i.element.insertBefore(a,s[r]):i.element.appendChild(a)}}}(e,t)}}),void 0,void 0),F=V({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"v-dynamic-modals"},e._l(e.api.dynamicModals,(function(t,i){return n(t.component,e._g(e._b({key:t.id,tag:"component",on:{closed:function(t){return e.slice(i)},"before-open":function(n){return e.beforeOpen(n,t,i)},opened:t.opened},scopedSlots:e._u([e._l(t.slots,(function(t,i){return{key:i,fn:function(){return[e.isString(t)?n("div",{key:i,domProps:{innerHTML:e._s(t)}}):n(t.component,e._g(e._b({key:i,tag:"component"},"component",t.bind,!1),t.on))]},proxy:!0}}))],null,!0),model:{value:t.value,callback:function(n){e.$set(t,"value",n)},expression:"modal.value"}},"component",t.bind,!1),t.on))})),1)},staticRenderFns:[]},undefined,{props:{},methods:{slice:function(e){this.api.dynamicModals.splice(e,1)},beforeOpen:function(e,t,n){var i=this;e.ref.params=t.params,this.$nextTick((function(){t.value||(i.slice(n),t.reject("show"))}))},isString:function(e){return"string"==typeof e}}},undefined,false,undefined,!1,void 0,void 0,void 0);function W(e,t){var n=r(r({},e),{},{props:r({},e.props)});return Object.assign(n.props,{api:{type:Object,default:function(){return t}}}),n}var Y=0,q="$modal",X=function(){var n,o,r=(o=null,e.observable({show:function(e){for(var n=this,i=arguments.length,r=new Array(i>1?i-1:0),a=1;a<i;a++)r[a-1]=arguments[a];switch(t(e)){case"string":return this.toggle.apply(this,[e,!0].concat(r));case"object":return Promise.allSettled([new Promise((function(t,i){var a={value:!0,id:Symbol("dynamicModal"),component:o,bind:{},slots:{},on:{},params:r[0],reject:i,opened:function(){t("show")}};n.dynamicModals.push(Object.assign(a,e))}))])}},hide:function(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];return this.toggle(t,!1)},hideAll:function(){return this.hide.apply(this,a(this.openedModals.map((function(e){return e.name}))))},toggle:function(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),i=1;i<t;i++)n[i-1]=arguments[i];var o=Array.isArray(e)?this.get.apply(this,a(e)):this.get(e);return Promise.allSettled(o.map((function(e){return e.toggle.apply(e,n)})))},get:function(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];return this.modals.filter((function(e){return t.includes(e.name)}))},dynamicModals:[],openedModals:[],modals:[],_setDefaultModal:function(e){o=e}}));return i(n={},q,r),i(n,"VModal",function(e){var t=W(K,e);return e._setDefaultModal(t),t}(r)),i(n,"VDynamicModals",function(e){return W(F,e)}(r)),n},Z=X(),G=Z.$modal,J=Z.VModal,Q=Z.VDynamicModals,ee=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=0===Y?Z:X(),i=n.$modal,o=n.VModal,r=n.VDynamicModals;Y+=1;var a=t[q]||q,s=t.VModal||"VModal",l=t.VDynamicModals||"VDynamicModals";e.prototype[a]=i,e.component(s,o),e.component(l,r)},te=function(e){return{install:function(t,n){var i=Object.assign({},e,n);ee(t,i)}}};te.install=ee;export{G as $modal,Q as VDynamicModals,J as VModal,X as createVfm,ee as installVfm,te as vfmPlugin};
 //# sourceMappingURL=VueFinalModal.esm.js.map
diff --git a/dist/VueFinalModal.esm.js.map b/dist/VueFinalModal.esm.js.map
index 41323ef3..37a3050d 100644
--- a/dist/VueFinalModal.esm.js.map
+++ b/dist/VueFinalModal.esm.js.map
@@ -1 +1 @@
-{"version":3,"file":"VueFinalModal.esm.js","sources":["../lib/utils/focusTrap.js","../lib/utils/dragResize.js","../lib/utils/bodyScrollLock.js","../lib/VueFinalModal.vue","../lib/PluginCore.js","../lib/utils/errors.js","../lib/Plugin.js"],"sourcesContent":["// stolen from vue-js-modal\n\nconst FOCUSABLE_ELEMENTS_QUERY =\n  'button:not([disabled]), ' +\n  'select:not([disabled]), ' +\n  'a[href]:not([disabled]), ' +\n  'area[href]:not([disabled]), ' +\n  '[contentEditable=\"\"]:not([disabled]), ' +\n  '[contentEditable=\"true\"]:not([disabled]), ' +\n  '[contentEditable=\"TRUE\"]:not([disabled]), ' +\n  'textarea:not([disabled]), ' +\n  'iframe:not([disabled]), ' +\n  'input:not([disabled]), ' +\n  'summary:not([disabled]), ' +\n  '[tabindex]:not([tabindex=\"-1\"])'\n\nconst isTabPressed = event => {\n  return event.key === 'Tab' || event.keyCode === 9\n}\n\nconst querySelectorAll = (element, selector) => {\n  return [...(element.querySelectorAll(selector) || [])]\n}\n\nconst queryFocusableElements = element => {\n  return querySelectorAll(element, FOCUSABLE_ELEMENTS_QUERY)\n}\n\nconst isFocused = element => {\n  return element == document.activeElement\n}\n\nconst isNothingFocused = () => {\n  return !document.activeElement\n}\n\nclass FocusTrap {\n  constructor() {\n    this.root = null\n    this.elements = []\n\n    this.onKeyDown = this.onKeyDown.bind(this)\n    this.enable = this.enable.bind(this)\n    this.disable = this.disable.bind(this)\n    this.firstElement = this.firstElement.bind(this)\n    this.lastElement = this.lastElement.bind(this)\n  }\n\n  lastElement() {\n    return this.elements[this.elements.length - 1] || null\n  }\n\n  firstElement() {\n    return this.elements[0] || null\n  }\n\n  onKeyDown(event) {\n    if (!isTabPressed(event)) {\n      return\n    }\n\n    // SHIFT + TAB\n    if (event.shiftKey) {\n      if (isFocused(this.firstElement())) {\n        this.lastElement().focus()\n        event.preventDefault()\n      }\n      return\n    }\n\n    // TAB\n    if (isNothingFocused() || isFocused(this.lastElement())) {\n      this.firstElement().focus()\n      event.preventDefault()\n      return\n    }\n  }\n\n  enabled() {\n    return !!this.root\n  }\n\n  enable(root) {\n    if (!root) {\n      return\n    }\n\n    this.root = root\n    this.elements = queryFocusableElements(this.root)\n\n    this.root.addEventListener('keydown', this.onKeyDown)\n  }\n\n  disable() {\n    this.root.removeEventListener('keydown', this.onKeyDown)\n    this.root = null\n  }\n}\n\nexport default FocusTrap\n","export const setStyle = (el, key, value) => {\n  const cacheStyle = el.style[key]\n  el.style[key] = value\n  return () => {\n    el.style[key] = cacheStyle\n  }\n}\n\nexport const getPosition = e => {\n  const { clientX: x, clientY: y } = e.targetTouches ? e.targetTouches[0] : e\n  return { x, y }\n}\n\nexport const capitalize = s => {\n  return s.charAt(0).toUpperCase() + s.slice(1)\n}\n\nexport const clamp = (min, num, max) => {\n  if (typeof min !== 'number') {\n    min = Math.min(num, max) || num\n  }\n  if (typeof max !== 'number') {\n    max = Math.max(num, min)\n  }\n  return Math.min(Math.max(num, min), max)\n}\n\nexport const trimPx = distance => {\n  return (distance && Number(distance.replace(/px$/, ''))) || 0\n}\n\nexport const validDragElement = (e, el, dragSelector) => {\n  if (dragSelector === '') return true\n  const list = [...el.querySelectorAll(dragSelector)]\n  return list.includes(e.target)\n}\n\nconst pointerType = {\n  down: {\n    pc: 'mousedown',\n    m: 'touchstart'\n  },\n  move: {\n    pc: 'mousemove',\n    m: 'touchmove'\n  },\n  up: {\n    pc: 'mouseup',\n    m: 'touchend'\n  }\n}\nexport const addListener = (type, el, callback) => {\n  el && el.addEventListener(pointerType[type].pc, callback)\n  el && el.addEventListener(pointerType[type].m, callback, { passive: false })\n}\nexport const removeListener = (type, el, callback) => {\n  el && el.removeEventListener(pointerType[type].pc, callback)\n  el && el.removeEventListener(pointerType[type].m, callback)\n}\n","// stolen from body-scroll-lock\n\n// Older browsers don't support event options, feature detect it.\nlet hasPassiveEvents = false\nif (typeof window !== 'undefined') {\n  const passiveTestOptions = {\n    get passive() {\n      hasPassiveEvents = true\n      return undefined\n    }\n  }\n  window.addEventListener('testPassive', null, passiveTestOptions)\n  window.removeEventListener('testPassive', null, passiveTestOptions)\n}\n\nconst isIosDevice =\n  typeof window !== 'undefined' &&\n  window.navigator &&\n  window.navigator.platform &&\n  (/iP(ad|hone|od)/.test(window.navigator.platform) ||\n    (window.navigator.platform === 'MacIntel' && window.navigator.maxTouchPoints > 1))\n\nlet locks = []\nlet documentListenerAdded = false\nlet clientY = 0\nlet initialClientY = -1\nlet previousBodyOverflowSetting\nlet previousBodyPaddingRight\n\nconst hasScrollbar = el => {\n  if (!el || el.nodeType !== Node.ELEMENT_NODE) return false\n\n  const style = window.getComputedStyle(el)\n  return ['auto', 'scroll'].includes(style.overflowY) && el.scrollHeight > el.clientHeight\n}\n\nconst shouldScroll = (el, delta) => {\n  if (el.scrollTop === 0 && delta < 0) return false\n  if (el.scrollTop + el.clientHeight + delta >= el.scrollHeight && delta > 0) return false\n  return true\n}\n\nconst composedPath = el => {\n  const path = []\n  while (el) {\n    path.push(el)\n    if (el.classList.contains('vfm')) return path\n    el = el.parentElement\n  }\n  return path\n}\n\nconst hasAnyScrollableEl = (el, delta) => {\n  let hasAnyScrollableEl = false\n  const path = composedPath(el)\n  path.forEach(el => {\n    if (hasScrollbar(el) && shouldScroll(el, delta)) {\n      hasAnyScrollableEl = true\n    }\n  })\n  return hasAnyScrollableEl\n}\n\n// returns true if `el` should be allowed to receive touchmove events.\nconst allowTouchMove = el => locks.some(() => hasAnyScrollableEl(el, -clientY))\n\nconst preventDefault = rawEvent => {\n  const e = rawEvent || window.event\n\n  // For the case whereby consumers adds a touchmove event listener to document.\n  // Recall that we do document.addEventListener('touchmove', preventDefault, { passive: false })\n  // in disableBodyScroll - so if we provide this opportunity to allowTouchMove, then\n  // the touchmove event on document will break.\n  if (allowTouchMove(e.target)) {\n    return true\n  }\n  // Do not prevent if the event has more than one touch (usually meaning this is a multi touch gesture like pinch to zoom).\n  if (e.touches.length > 1) return true\n\n  if (e.preventDefault) e.preventDefault()\n\n  return false\n}\n\nconst setOverflowHidden = options => {\n  // If previousBodyPaddingRight is already set, don't set it again.\n  if (previousBodyPaddingRight === undefined) {\n    const reserveScrollBarGap = !!options && options.reserveScrollBarGap === true\n    const scrollBarGap = window.innerWidth - document.documentElement.clientWidth\n\n    if (reserveScrollBarGap && scrollBarGap > 0) {\n      const computedBodyPaddingRight = parseInt(getComputedStyle(document.body).getPropertyValue('padding-right'), 10)\n      previousBodyPaddingRight = document.body.style.paddingRight\n      document.body.style.paddingRight = `${computedBodyPaddingRight + scrollBarGap}px`\n    }\n  }\n  // If previousBodyOverflowSetting is already set, don't set it again.\n  if (previousBodyOverflowSetting === undefined) {\n    previousBodyOverflowSetting = document.body.style.overflow\n    document.body.style.overflow = 'hidden'\n  }\n}\n\nconst restoreOverflowSetting = () => {\n  if (previousBodyPaddingRight !== undefined) {\n    document.body.style.paddingRight = previousBodyPaddingRight\n\n    // Restore previousBodyPaddingRight to undefined so setOverflowHidden knows it\n    // can be set again.\n    previousBodyPaddingRight = undefined\n  }\n\n  if (previousBodyOverflowSetting !== undefined) {\n    document.body.style.overflow = previousBodyOverflowSetting\n\n    // Restore previousBodyOverflowSetting to undefined\n    // so setOverflowHidden knows it can be set again.\n    previousBodyOverflowSetting = undefined\n  }\n}\n// https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#Problems_and_solutions\nconst isTargetElementTotallyScrolled = targetElement =>\n  targetElement ? targetElement.scrollHeight - targetElement.scrollTop <= targetElement.clientHeight : false\n\nconst handleScroll = (event, targetElement) => {\n  clientY = event.targetTouches[0].clientY - initialClientY\n\n  if (allowTouchMove(event.target)) {\n    return false\n  }\n\n  if (targetElement && targetElement.scrollTop === 0 && clientY > 0) {\n    // element is at the top of its scroll.\n    return preventDefault(event)\n  }\n\n  if (isTargetElementTotallyScrolled(targetElement) && clientY < 0) {\n    // element is at the bottom of its scroll.\n    return preventDefault(event)\n  }\n\n  event.stopPropagation()\n  return true\n}\n\nexport const disableBodyScroll = (targetElement, options) => {\n  // targetElement must be provided\n  if (!targetElement) {\n    // eslint-disable-next-line no-console\n    console.error(\n      'disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.'\n    )\n    return\n  }\n\n  // disableBodyScroll must not have been called on this targetElement before\n  if (locks.some(lock => lock.targetElement === targetElement)) {\n    return\n  }\n\n  const lock = {\n    targetElement,\n    options: options || {}\n  }\n\n  locks = [...locks, lock]\n\n  if (isIosDevice) {\n    targetElement.ontouchstart = event => {\n      if (event.targetTouches.length === 1) {\n        // detect single touch.\n        initialClientY = event.targetTouches[0].clientY\n      }\n    }\n    targetElement.ontouchmove = event => {\n      if (event.targetTouches.length === 1) {\n        // detect single touch.\n        handleScroll(event, targetElement)\n      }\n    }\n\n    if (!documentListenerAdded) {\n      document.addEventListener('touchmove', preventDefault, hasPassiveEvents ? { passive: false } : undefined)\n      documentListenerAdded = true\n    }\n  } else {\n    setOverflowHidden(options)\n  }\n}\n\nexport const enableBodyScroll = targetElement => {\n  if (!targetElement) {\n    // eslint-disable-next-line no-console\n    console.error(\n      'enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices.'\n    )\n    return\n  }\n\n  locks = locks.filter(lock => lock.targetElement !== targetElement)\n\n  if (isIosDevice) {\n    targetElement.ontouchstart = null\n    targetElement.ontouchmove = null\n\n    if (documentListenerAdded && locks.length === 0) {\n      document.removeEventListener('touchmove', preventDefault, hasPassiveEvents ? { passive: false } : undefined)\n      documentListenerAdded = false\n    }\n  } else if (!locks.length) {\n    restoreOverflowSetting()\n  }\n}\n","<template>\n  <div\n    v-if=\"ssr || visible\"\n    v-show=\"!ssr || visible\"\n    :style=\"bindStyle\"\n    class=\"vfm vfm--inset\"\n    :class=\"[attach === false ? 'vfm--fixed' : 'vfm--absolute', { 'vfm--prevent-none': preventClick }]\"\n    @keydown.esc=\"onEsc\"\n  >\n    <transition\n      ref=\"vfmOverlayTransition\"\n      v-bind=\"computedOverlayTransition\"\n      @before-enter=\"beforeOverlayEnter\"\n      @after-enter=\"afterOverlayEnter\"\n      @before-leave=\"beforeOverlayLeave\"\n      @after-leave=\"afterOverlayLeave\"\n    >\n      <div\n        v-show=\"!hideOverlay && visibility.overlay\"\n        class=\"vfm__overlay vfm--overlay vfm--absolute vfm--inset\"\n        :class=\"overlayClass\"\n        :style=\"overlayStyle\"\n      ></div>\n    </transition>\n    <transition\n      ref=\"vfmTransition\"\n      v-bind=\"computedTransition\"\n      @before-enter=\"beforeModalEnter\"\n      @after-enter=\"afterModalEnter\"\n      @before-leave=\"beforeModalLeave\"\n      @after-leave=\"afterModalLeave\"\n    >\n      <div\n        v-show=\"visibility.modal\"\n        ref=\"vfmContainer\"\n        class=\"vfm__container vfm--absolute vfm--inset vfm--outline-none\"\n        :class=\"classes\"\n        :style=\"styles\"\n        :aria-expanded=\"visibility.modal.toString()\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        tabindex=\"-1\"\n        @mouseup.self=\"onMouseupContainer\"\n        @mousedown.self=\"onMousedown\"\n      >\n        <div\n          ref=\"vfmContent\"\n          class=\"vfm__content\"\n          :class=\"[contentClass, { 'vfm--prevent-auto': preventClick }]\"\n          :style=\"bindContentStyle\"\n          @mousedown=\"onMousedown(null)\"\n        >\n          <slot :params=\"params\" :close=\"() => $emit('input', false)\" />\n          <div\n            v-if=\"visibility.resize && visibility.modal\"\n            ref=\"vfmResize\"\n            class=\"vfm__resize vfm--absolute vfm--inset vfm--prevent-none vfm--select-none vfm--touch-none\"\n          >\n            <div\n              v-for=\"direction in resizeDirections\"\n              :key=\"direction\"\n              :direction=\"direction\"\n              :class=\"`vfm--resize-${direction}`\"\n              class=\"vfm--absolute vfm--prevent-auto\"\n            ></div>\n          </div>\n        </div>\n      </div>\n    </transition>\n  </div>\n</template>\n\n<script>\nimport FocusTrap from './utils/focusTrap.js'\nimport {\n  setStyle,\n  getPosition,\n  capitalize,\n  clamp,\n  trimPx,\n  validDragElement,\n  addListener,\n  removeListener\n} from './utils/dragResize.js'\nimport { disableBodyScroll, enableBodyScroll } from './utils/bodyScrollLock'\n\nconst noop = () => {}\n\nconst TransitionState = {\n  Enter: 'enter',\n  Entering: 'entering',\n  Leave: 'leave',\n  Leaving: 'leavng'\n}\n\nfunction validateAttachTarget(val) {\n  const type = typeof val\n\n  if (type === 'boolean' || type === 'string') return true\n\n  return val.nodeType === Node.ELEMENT_NODE\n}\n\nconst CLASS_PROP = {\n  type: [String, Object, Array],\n  default: ''\n}\n\nconst STYLE_PROP = {\n  type: [Object, Array],\n  default: () => ({})\n}\n\nconst resizeCursor = {\n  t: 'ns-resize',\n  tr: 'nesw-resize',\n  r: 'ew-resize',\n  br: 'nwse-resize',\n  b: 'ns-resize',\n  bl: 'nesw-resize',\n  l: 'ew-resize',\n  tl: 'nwse-resize'\n}\n\nexport default {\n  props: {\n    name: { type: String, default: null },\n    value: { type: Boolean, default: false },\n    ssr: { type: Boolean, default: true },\n    classes: CLASS_PROP,\n    overlayClass: CLASS_PROP,\n    contentClass: CLASS_PROP,\n    styles: STYLE_PROP,\n    overlayStyle: STYLE_PROP,\n    contentStyle: STYLE_PROP,\n    lockScroll: { type: Boolean, default: true },\n    hideOverlay: { type: Boolean, default: false },\n    clickToClose: { type: Boolean, default: true },\n    escToClose: { type: Boolean, default: false },\n    preventClick: { type: Boolean, default: false },\n    attach: { type: null, default: false, validator: validateAttachTarget },\n    transition: { type: [String, Object], default: 'vfm' },\n    overlayTransition: { type: [String, Object], default: 'vfm' },\n    zIndexAuto: { type: Boolean, default: true },\n    zIndexBase: { type: [String, Number], default: 1000 },\n    zIndex: { type: [Boolean, String, Number], default: false },\n    focusRetain: { type: Boolean, default: true },\n    focusTrap: { type: Boolean, default: false },\n    fitParent: { type: Boolean, default: true },\n    drag: { type: Boolean, default: false },\n    dragSelector: { type: String, default: '' },\n    keepChangedStyle: { type: Boolean, default: false },\n    resize: {\n      type: Boolean,\n      default: false\n    },\n    resizeDirections: {\n      type: Array,\n      default: () => ['t', 'tr', 'r', 'br', 'b', 'bl', 'l', 'tl'],\n      validator: val =>\n        ['t', 'tr', 'r', 'br', 'b', 'bl', 'l', 'tl'].filter(value => val.indexOf(value) !== -1).length === val.length\n    },\n    minWidth: { type: Number, default: 0 },\n    minHeight: { type: Number, default: 0 },\n    maxWidth: { type: Number, default: Infinity },\n    maxHeight: { type: Number, default: Infinity }\n  },\n  data: () => ({\n    modalStackIndex: null,\n    visible: false,\n    visibility: {\n      modal: false,\n      overlay: false,\n      resize: false\n    },\n    overlayTransitionState: null,\n    modalTransitionState: null,\n    stopEvent: false,\n    params: {},\n    dragResizeStyle: {},\n    resolveToggle: noop,\n    rejectToggle: noop,\n    state: null,\n    lastMousedownEl: null\n  }),\n  computed: {\n    api() {\n      return this[this.$_options.key]\n    },\n    isComponentReadyToBeDestroyed() {\n      return (\n        (this.hideOverlay || this.overlayTransitionState === TransitionState.Leave) &&\n        this.modalTransitionState === TransitionState.Leave\n      )\n    },\n    calculateZIndex() {\n      if (this.zIndex === false) {\n        if (this.zIndexAuto) {\n          return +this.zIndexBase + 2 * (this.modalStackIndex || 0)\n        } else {\n          return false\n        }\n      } else {\n        return this.zIndex\n      }\n    },\n    bindStyle() {\n      return {\n        ...(this.calculateZIndex !== false && { zIndex: this.calculateZIndex })\n      }\n    },\n    bindContentStyle() {\n      let style = [this.dragResizeStyle]\n      Array.isArray(this.contentStyle) ? style.push(...this.contentStyle) : style.push(this.contentStyle)\n      return style\n    },\n    computedTransition() {\n      if (typeof this.transition === 'string') return { name: this.transition }\n      return { ...this.transition }\n    },\n    computedOverlayTransition() {\n      if (typeof this.overlayTransition === 'string') return { name: this.overlayTransition }\n      return { ...this.overlayTransition }\n    }\n  },\n  watch: {\n    value(value) {\n      if (this.stopEvent) {\n        this.stopEvent = false\n        return\n      }\n      this.mounted()\n      if (!value) {\n        if (this.emitEvent('before-close', true)) {\n          this.rejectToggle('hide')\n          return\n        }\n        this.close()\n      }\n    },\n    lockScroll: 'handleLockScroll',\n    hideOverlay(value) {\n      if (this.value && !value) {\n        this.visibility.overlay = true\n      }\n    },\n    attach: 'mounted',\n    isComponentReadyToBeDestroyed(isReady) {\n      if (isReady) {\n        this.visible = false\n      }\n    },\n    drag(value) {\n      if (this.visible) {\n        value ? this.addDragDown() : this.removeDragDown()\n      }\n    },\n    resize(value) {\n      if (this.visible) {\n        value ? this.addResizeDown() : this.removeResizeDown()\n      }\n    },\n    keepChangedStyle(value) {\n      if (!value) {\n        this.dragResizeStyle = {}\n      }\n    }\n  },\n  created() {\n    this.api.modals.push(this)\n  },\n  mounted() {\n    this.$focusTrap = new FocusTrap()\n    this.mounted()\n  },\n  beforeDestroy() {\n    this.close()\n    this.lockScroll && this.$refs.vfmContainer && enableBodyScroll(this.$refs.vfmContainer)\n    this?.$el?.remove()\n\n    let index = this.api.modals.findIndex(vm => vm === this)\n    this.api.modals.splice(index, 1)\n  },\n  methods: {\n    mounted() {\n      if (this.value) {\n        if (this.emitEvent('before-open', false)) {\n          this.rejectToggle('show')\n          return\n        }\n        let target = this.getAttachElement()\n        if (target || this.attach === false) {\n          this.attach !== false && target.appendChild(this.$el)\n\n          let index = this.api.openedModals.findIndex(vm => vm === this)\n          if (index !== -1) {\n            // if this is already exist in modalStack, delete it\n            this.api.openedModals.splice(index, 1)\n          }\n          this.api.openedModals.push(this)\n\n          this.modalStackIndex = this.api.openedModals.length - 1\n\n          this.handleLockScroll()\n          this.api.openedModals\n            .filter(vm => vm !== this)\n            .forEach((vm, index) => {\n              if (vm.getAttachElement() === target) {\n                // if vm and this have the same attach element\n                vm.modalStackIndex = index\n                vm.visibility.overlay = false\n              }\n            })\n\n          this.visible = true\n          this.$nextTick(() => {\n            this.startTransitionEnter()\n          })\n        } else if (target !== false) {\n          console.warn('Unable to locate target '.concat(this.attach))\n        }\n      }\n    },\n    close() {\n      let index = this.api.openedModals.findIndex(vm => vm === this)\n      if (index !== -1) {\n        // remove this in modalStack\n        this.api.openedModals.splice(index, 1)\n      }\n      if (this.api.openedModals.length > 0) {\n        // If there are still nested modals opened\n        const $_vm = this.api.openedModals[this.api.openedModals.length - 1]\n        if ($_vm.focusRetain || $_vm.focusTrap) {\n          $_vm.$refs.vfmContainer.focus()\n        }\n        !$_vm.hideOverlay && ($_vm.visibility.overlay = true)\n      }\n      this.drag && this.removeDragDown()\n      this.resize && this.removeResizeDown()\n      this.state = null\n\n      this.startTransitionLeave()\n    },\n    startTransitionEnter() {\n      this.visibility.overlay = true\n      this.visibility.modal = true\n    },\n    startTransitionLeave() {\n      this.visibility.overlay = false\n      this.visibility.modal = false\n    },\n    handleLockScroll() {\n      if (this.value) {\n        this.$nextTick(() => {\n          if (this.lockScroll) {\n            disableBodyScroll(this.$refs.vfmContainer, {\n              reserveScrollBarGap: true\n            })\n          } else {\n            enableBodyScroll(this.$refs.vfmContainer)\n          }\n        })\n      }\n    },\n    getAttachElement() {\n      let target\n      if (this.attach === false) {\n        target = false\n      } else if (typeof this.attach === 'string') {\n        // CSS selector\n        if (window) {\n          target = window.document.querySelector(this.attach)\n        } else {\n          target = false\n        }\n      } else {\n        // DOM Element\n        target = this.attach\n      }\n      return target\n    },\n    beforeOverlayEnter() {\n      this.overlayTransitionState = TransitionState.Entering\n    },\n    afterOverlayEnter() {\n      this.overlayTransitionState = TransitionState.Enter\n    },\n    beforeOverlayLeave() {\n      this.overlayTransitionState = TransitionState.Leaving\n    },\n    afterOverlayLeave() {\n      this.overlayTransitionState = TransitionState.Leave\n    },\n    beforeModalEnter() {\n      this.modalTransitionState = TransitionState.Entering\n    },\n    afterModalEnter() {\n      this.modalTransitionState = TransitionState.Enter\n      if (this.focusRetain || this.focusTrap) {\n        this.$refs.vfmContainer.focus()\n      }\n      this.focusTrap && this.$focusTrap.enable(this.$refs.vfmContainer)\n      this.drag && this.addDragDown()\n      this.resize && this.addResizeDown()\n\n      this.$emit('opened', this.createModalEvent({ type: 'opened' }))\n      this.resolveToggle('show')\n    },\n    beforeModalLeave() {\n      this.modalTransitionState = TransitionState.Leaving\n\n      if (this.$focusTrap.enabled()) {\n        this.$focusTrap.disable()\n      }\n    },\n    afterModalLeave() {\n      this.modalTransitionState = TransitionState.Leave\n      this.modalStackIndex = null\n      this.lockScroll && enableBodyScroll(this.$refs.vfmContainer)\n      if (!this.keepChangedStyle) {\n        this.dragResizeStyle = {}\n      }\n\n      let stopEvent = false\n      const event = this.createModalEvent({\n        type: 'closed',\n        stop() {\n          stopEvent = true\n        }\n      })\n      this.$emit('closed', event)\n      this.resolveToggle('hide')\n      if (stopEvent) return\n      this.params = {}\n    },\n    onMousedown(e) {\n      this.lastMousedownEl = e?.target\n    },\n    onMouseupContainer() {\n      // skip when the lastMousedownEl didn't equal $refs.vfmContainer\n      if (this.lastMousedownEl !== this.$refs.vfmContainer) return\n      // skip when state equal 'resize:move'\n      if (this.state === 'resize:move') return\n      this.$emit('click-outside', this.createModalEvent({ type: 'click-outside' }))\n      this.clickToClose && this.$emit('input', false)\n    },\n    onEsc() {\n      if (this.visible && this.escToClose) {\n        this.$emit('input', false)\n      }\n    },\n    createModalEvent(eventProps = {}) {\n      return {\n        ref: this,\n        ...eventProps\n      }\n    },\n    emitEvent(eventType, value) {\n      let stopEvent = false\n      const event = this.createModalEvent({\n        type: eventType,\n        stop() {\n          stopEvent = true\n        }\n      })\n      this.$emit(eventType, event)\n      if (stopEvent) {\n        this.stopEvent = true\n        this.$emit('input', value)\n        return true\n      }\n      return false\n    },\n    emitState(e, state, action) {\n      this.state = `${state}:${action}`\n      this.$emit(this.state, e)\n    },\n    toggle(show, params) {\n      return new Promise((resolve, reject) => {\n        this.resolveToggle = res => {\n          resolve(res)\n          this.resolveToggle = noop\n        }\n        this.rejectToggle = err => {\n          reject(err)\n          this.rejectToggle = noop\n        }\n        const value = typeof show === 'boolean' ? show : !this.value\n        if (value && arguments.length === 2) {\n          this.params = params\n        }\n        this.$emit('input', value)\n      })\n    },\n    pointerDown(e) {\n      e.stopPropagation()\n      const STATE_RESIZE = 'resize'\n      const STATE_DRAG = 'drag'\n      const { vfmContainer, vfmContent } = this.$refs\n      const direction = e.target.getAttribute('direction')\n      let state\n      if (direction) {\n        state = STATE_RESIZE\n      } else if (validDragElement(e, vfmContent, this.dragSelector)) {\n        state = STATE_DRAG\n      } else {\n        return\n      }\n      this.emitState(e, state, 'start')\n      const down = getPosition(e)\n      const rectContainer = vfmContainer.getBoundingClientRect()\n      const rectContent = vfmContent.getBoundingClientRect()\n      const isAbsolute = window.getComputedStyle(vfmContent).position === 'absolute'\n      const position = {\n        top: trimPx(this.dragResizeStyle.top),\n        left: trimPx(this.dragResizeStyle.left)\n      }\n      const limit = (() => {\n        if (this.fitParent) {\n          const limit = {\n            absolute() {\n              return {\n                minTop: 0,\n                minLeft: 0,\n                maxTop: rectContainer.height - rectContent.height,\n                maxLeft: rectContainer.width - rectContent.width\n              }\n            },\n            relative() {\n              return {\n                minTop: position.top + rectContainer.top - rectContent.top,\n                minLeft: position.left + rectContainer.left - rectContent.left,\n                maxTop: position.top + rectContainer.bottom - rectContent.bottom,\n                maxLeft: position.left + rectContainer.right - rectContent.right\n              }\n            }\n          }\n          return isAbsolute ? limit.absolute() : limit.relative()\n        } else {\n          return {}\n        }\n      })()\n      const resetBodyCursor = state === STATE_RESIZE && setStyle(document.body, 'cursor', resizeCursor[direction])\n\n      const moving = e => {\n        // onPointerMove\n        e.stopPropagation()\n        this.emitState(e, state, 'move')\n        const move = getPosition(e)\n        let offset = {\n          x: move.x - down.x,\n          y: move.y - down.y\n        }\n        if (state === STATE_RESIZE) {\n          offset = this.getResizeOffset(direction, offset, rectContainer, rectContent, isAbsolute)\n        }\n\n        let top\n        let left\n        if (isAbsolute) {\n          top = rectContent.top - rectContainer.top + offset.y\n          left = rectContent.left - rectContainer.left + offset.x\n        } else {\n          top = position.top + offset.y\n          left = position.left + offset.x\n        }\n        if (state === STATE_DRAG && this.fitParent) {\n          top = clamp(limit.minTop, top, limit.maxTop)\n          left = clamp(limit.minLeft, left, limit.maxLeft)\n        }\n        const style = {\n          position: 'relative',\n          top: top + 'px',\n          left: left + 'px',\n          margin: 'unset',\n          touchAction: 'none',\n          ...(isAbsolute && {\n            position: 'absolute',\n            transform: 'unset',\n            width: rectContent.width + 'px',\n            height: rectContent.height + 'px'\n          }),\n          ...(offset.width && { width: offset.width + 'px' }),\n          ...(offset.height && { height: offset.height + 'px' })\n        }\n\n        this.dragResizeStyle = {\n          ...this.dragResizeStyle,\n          ...style\n        }\n      }\n      const end = e => {\n        // onPointerUp\n        e.stopPropagation()\n        if (state === STATE_RESIZE) {\n          resetBodyCursor && resetBodyCursor()\n        }\n        // Excute onClickContainer before trigger emitState\n        setTimeout(() => {\n          this.emitState(e, state, 'end')\n        })\n        removeListener('move', document, moving)\n        removeListener('up', document, end)\n      }\n      addListener('move', document, moving)\n      addListener('up', document, end)\n    },\n    addDragDown() {\n      addListener('down', this.$refs.vfmContent, this.pointerDown)\n      this.dragResizeStyle.touchAction = 'none'\n    },\n    removeDragDown() {\n      removeListener('down', this.$refs.vfmContent, this.pointerDown)\n    },\n    addResizeDown() {\n      this.visibility.resize = true\n      this.$nextTick(() => {\n        addListener('down', this.$refs.vfmResize, this.pointerDown)\n      })\n    },\n    removeResizeDown() {\n      removeListener('down', this.$refs.vfmResize, this.pointerDown)\n      this.visibility.resize = false\n    },\n    getResizeOffset(direction, offset, rectContainer, rectContent, isAbsolute) {\n      const setOffset = dir => {\n        let offsetAxis = offset[dir.axis]\n        offsetAxis = this.fitParent ? clamp(dir.min, offsetAxis, dir.max) : offsetAxis\n        let edge = clamp(dir.minEdge, dir.getEdge(offsetAxis), dir.maxEdge)\n        offsetAxis = dir.getOffsetAxis(edge, isAbsolute)\n        return {\n          [dir.edgeName]: edge,\n          [dir.axis]: offsetAxis\n        }\n      }\n\n      const getDirectionInfo = (position, edgeName, axis, isPositive) => {\n        const rectContentEdge = rectContent[edgeName]\n        const positionOffset = rectContainer[position] - rectContent[position]\n        const EdgeName = capitalize(edgeName)\n        return {\n          axis,\n          edgeName,\n          min: isPositive ? positionOffset : -rectContentEdge,\n          max: isPositive ? rectContentEdge : positionOffset,\n          minEdge: this[`min${EdgeName}`],\n          maxEdge: this[`max${EdgeName}`],\n          getEdge: offsetAxis => rectContent[edgeName] - offsetAxis * (isPositive ? 1 : -1),\n          getOffsetAxis: (edge, isAbsolute) => {\n            const offsetAxis = rectContent[edgeName] - edge\n            if (isAbsolute) {\n              return isPositive ? offsetAxis : 0\n            } else {\n              return ((isPositive ? 1 : -1) * offsetAxis) / 2\n            }\n          }\n        }\n      }\n\n      const directions = {\n        t: ['top', 'height', 'y', true],\n        b: ['bottom', 'height', 'y', false],\n        l: ['left', 'width', 'x', true],\n        r: ['right', 'width', 'x', false]\n      }\n\n      let _offset = { x: 0, y: 0 }\n      direction.split('').forEach(dir => {\n        const directionInfo = getDirectionInfo(...directions[dir])\n        _offset = {\n          ..._offset,\n          ...setOffset(directionInfo)\n        }\n      })\n      return _offset\n    }\n  }\n}\n</script>\n\n<style lang=\"css\" scoped>\n.vfm--fixed {\n  position: fixed;\n}\n.vfm--absolute {\n  position: absolute;\n}\n.vfm--inset {\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n}\n.vfm--overlay {\n  background-color: rgba(0, 0, 0, 0.5);\n}\n.vfm--prevent-none {\n  pointer-events: none;\n}\n.vfm--prevent-auto {\n  pointer-events: auto;\n}\n.vfm--outline-none:focus {\n  outline: none;\n}\n.vfm-enter-active,\n.vfm-leave-active {\n  transition: opacity 0.2s;\n}\n.vfm-enter,\n.vfm-leave-to {\n  opacity: 0;\n}\n\n.vfm--touch-none {\n  touch-action: none;\n}\n.vfm--select-none {\n  user-select: none;\n}\n\n.vfm--resize-tr,\n.vfm--resize-br,\n.vfm--resize-bl,\n.vfm--resize-tl {\n  width: 12px;\n  height: 12px;\n  z-index: 10;\n}\n\n.vfm--resize-t {\n  top: -6px;\n  left: 0;\n  width: 100%;\n  height: 12px;\n  cursor: ns-resize;\n}\n.vfm--resize-tr {\n  top: -6px;\n  right: -6px;\n  cursor: nesw-resize;\n}\n.vfm--resize-r {\n  top: 0;\n  right: -6px;\n  width: 12px;\n  height: 100%;\n  cursor: ew-resize;\n}\n.vfm--resize-br {\n  bottom: -6px;\n  right: -6px;\n  cursor: nwse-resize;\n}\n.vfm--resize-b {\n  bottom: -6px;\n  left: 0;\n  width: 100%;\n  height: 12px;\n  cursor: ns-resize;\n}\n.vfm--resize-bl {\n  bottom: -6px;\n  left: -6px;\n  cursor: nesw-resize;\n}\n.vfm--resize-l {\n  top: 0;\n  left: -6px;\n  width: 12px;\n  height: 100%;\n  cursor: ew-resize;\n}\n.vfm--resize-tl {\n  top: -6px;\n  left: -6px;\n  cursor: nwse-resize;\n}\n</style>\n","import VueFinalModal from './VueFinalModal.vue'\nimport ModalsContainer from './ModalsContainer.vue'\n\nfunction assignOptions(component, options) {\n  const _component = { ...component }\n  Object.assign(_component.props, {\n    $_options: { type: Object, default: () => options }\n  })\n  return _component\n}\n\nfunction createVfm(Vue, options) {\n  let vfm\n\n  return function() {\n    vfm = {\n      show(modal, ...args) {\n        switch (typeof modal) {\n          case 'string':\n            return this.toggle(modal, true, ...args)\n          case 'object': {\n            return Promise.allSettled([\n              new Promise((resolve, reject) => {\n                const defaultModal = {\n                  value: true,\n                  id: Symbol('dynamicModal'),\n                  component: options.componentName,\n                  bind: {},\n                  slots: {},\n                  on: {},\n                  params: args[0],\n                  reject,\n                  opened() {\n                    resolve('show')\n                  }\n                }\n                this.dynamicModals.push(Object.assign(defaultModal, modal))\n              })\n            ])\n          }\n        }\n      },\n      hide(...names) {\n        return this.toggle(names, false)\n      },\n      hideAll() {\n        return this.hide(...this.openedModals.map(modal => modal.name))\n      },\n      toggle(name, ...args) {\n        const modals = Array.isArray(name) ? this.get(...name) : this.get(name)\n        return Promise.allSettled(modals.map(modal => modal.toggle(...args)))\n      },\n      get(...names) {\n        return this.modals.filter(modal => names.includes(modal.name))\n      },\n      dynamicModals: [],\n      openedModals: [],\n      modals: []\n    }\n    return Vue.observable(vfm)\n  }\n}\n\nexport function bindPrototype(Vue, options) {\n  const vfm = createVfm(Vue, options)()\n  Object.defineProperty(Vue.prototype, options.key, {\n    get() {\n      return vfm\n    }\n  })\n}\n\nexport function registModal(Vue, options) {\n  Vue.component(options.componentName, assignOptions(VueFinalModal, options))\n}\nexport function registContainer(Vue, options) {\n  Vue.component(options.dynamicContainerName, assignOptions(ModalsContainer, options))\n}\n","export const DUPLICATE_KEY = '[vue-final-modal] Duplicate registration API key of VueFinalModal.'\n\nexport const DUPLICATE_COMPONENT = '[vue-final-modal] Duplicate registration componentName of VueFinalModal.'\n\nexport const DUPLICATE_DYNAMIC_CONTAINER =\n  '[vue-final-modal] Duplicate registration dynamicContainerName of ModalsContainer.'\n","import { bindPrototype, registModal, registContainer } from './PluginCore'\nimport { DUPLICATE_KEY, DUPLICATE_COMPONENT, DUPLICATE_DYNAMIC_CONTAINER } from './utils/errors'\n\nconst defaultOptions = {\n  componentName: 'VueFinalModal',\n  dynamicContainerName: 'ModalsContainer',\n  key: '$vfm'\n}\n\nconst validPlugin = (duplicateKey, duplicateComponent, duplicateDynamicContainer) => {\n  if (!(duplicateKey || duplicateComponent || duplicateDynamicContainer)) return true\n\n  if (typeof window === 'undefined') return false\n\n  duplicateKey && console.error(DUPLICATE_KEY)\n  duplicateComponent && console.error(DUPLICATE_COMPONENT)\n  duplicateDynamicContainer && console.error(DUPLICATE_DYNAMIC_CONTAINER)\n\n  return false\n}\n\nconst Plugin = pluginOptions => ({\n  install(Vue, options) {\n    const _options = Object.assign({}, defaultOptions, pluginOptions, options)\n    const duplicateKey = Vue.prototype[_options.key]\n    const duplicateComponent = Vue.options.components[_options.componentName]\n    const duplicateDynamicContainer = Vue.options.components[_options.dynamicContainerName]\n\n    if (validPlugin(duplicateKey, duplicateComponent, duplicateDynamicContainer)) {\n      bindPrototype(Vue, _options)\n      registModal(Vue, _options)\n      registContainer(Vue, _options)\n    }\n  }\n})\n\nexport default Plugin\n"],"names":["queryFocusableElements","element","selector","querySelectorAll","isFocused","document","activeElement","FocusTrap","root","elements","onKeyDown","this","bind","enable","disable","firstElement","lastElement","length","event","key","keyCode","isTabPressed","shiftKey","focus","preventDefault","addEventListener","removeEventListener","getPosition","e","targetTouches","x","clientX","y","clientY","clamp","min","num","max","Math","trimPx","distance","Number","replace","pointerType","down","pc","m","move","up","addListener","type","el","callback","passive","removeListener","hasPassiveEvents","window","passiveTestOptions","previousBodyOverflowSetting","previousBodyPaddingRight","isIosDevice","navigator","platform","test","maxTouchPoints","locks","documentListenerAdded","initialClientY","hasAnyScrollableEl","delta","path","push","classList","contains","parentElement","composedPath","forEach","nodeType","Node","ELEMENT_NODE","style","getComputedStyle","includes","overflowY","scrollHeight","clientHeight","hasScrollbar","scrollTop","shouldScroll","allowTouchMove","some","rawEvent","target","touches","disableBodyScroll","targetElement","options","lock","ontouchstart","ontouchmove","isTargetElementTotallyScrolled","stopPropagation","handleScroll","undefined","reserveScrollBarGap","scrollBarGap","innerWidth","documentElement","clientWidth","computedBodyPaddingRight","parseInt","body","getPropertyValue","paddingRight","overflow","setOverflowHidden","console","error","enableBodyScroll","filter","dragSelector","value","cacheStyle","s","charAt","toUpperCase","slice","assignOptions","component","_component","Object","assign","props","$_options","bindPrototype","Vue","vfm","show","modal","args","toggle","Promise","allSettled","resolve","reject","defaultModal","id","Symbol","componentName","slots","on","params","opened","_this","dynamicModals","hide","names","hideAll","openedModals","map","name","modals","Array","isArray","get","observable","createVfm","defineProperty","prototype","defaultOptions","dynamicContainerName","pluginOptions","install","_options","duplicateKey","duplicateComponent","duplicateDynamicContainer","validPlugin","components","VueFinalModal","registModal","ModalsContainer","registContainer"],"mappings":"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"}
\ No newline at end of file
+{"version":3,"file":"VueFinalModal.esm.js","sources":["../lib/utils/focusTrap.js","../lib/utils/dragResize.js","../lib/utils/bodyScrollLock.js","../lib/VModal.vue","../lib/PluginCore.js","../lib/Plugin.js"],"sourcesContent":["// stolen from vue-js-modal\n\nconst FOCUSABLE_ELEMENTS_QUERY =\n  'button:not([disabled]), ' +\n  'select:not([disabled]), ' +\n  'a[href]:not([disabled]), ' +\n  'area[href]:not([disabled]), ' +\n  '[contentEditable=\"\"]:not([disabled]), ' +\n  '[contentEditable=\"true\"]:not([disabled]), ' +\n  '[contentEditable=\"TRUE\"]:not([disabled]), ' +\n  'textarea:not([disabled]), ' +\n  'iframe:not([disabled]), ' +\n  'input:not([disabled]), ' +\n  'summary:not([disabled]), ' +\n  '[tabindex]:not([tabindex=\"-1\"])'\n\nconst isTabPressed = event => {\n  return event.key === 'Tab' || event.keyCode === 9\n}\n\nconst querySelectorAll = (element, selector) => {\n  return [...(element.querySelectorAll(selector) || [])]\n}\n\nconst queryFocusableElements = element => {\n  return querySelectorAll(element, FOCUSABLE_ELEMENTS_QUERY)\n}\n\nconst isFocused = element => {\n  return element == document.activeElement\n}\n\nconst isNothingFocused = () => {\n  return !document.activeElement\n}\n\nclass FocusTrap {\n  constructor() {\n    this.root = null\n    this.elements = []\n\n    this.onKeyDown = this.onKeyDown.bind(this)\n    this.enable = this.enable.bind(this)\n    this.disable = this.disable.bind(this)\n    this.firstElement = this.firstElement.bind(this)\n    this.lastElement = this.lastElement.bind(this)\n  }\n\n  lastElement() {\n    return this.elements[this.elements.length - 1] || null\n  }\n\n  firstElement() {\n    return this.elements[0] || null\n  }\n\n  onKeyDown(event) {\n    if (!isTabPressed(event)) {\n      return\n    }\n\n    // SHIFT + TAB\n    if (event.shiftKey) {\n      if (isFocused(this.firstElement())) {\n        this.lastElement().focus()\n        event.preventDefault()\n      }\n      return\n    }\n\n    // TAB\n    if (isNothingFocused() || isFocused(this.lastElement())) {\n      this.firstElement().focus()\n      event.preventDefault()\n      return\n    }\n  }\n\n  enabled() {\n    return !!this.root\n  }\n\n  enable(root) {\n    if (!root) {\n      return\n    }\n\n    this.root = root\n    this.elements = queryFocusableElements(this.root)\n\n    this.root.addEventListener('keydown', this.onKeyDown)\n  }\n\n  disable() {\n    this.root.removeEventListener('keydown', this.onKeyDown)\n    this.root = null\n  }\n}\n\nexport default FocusTrap\n","export const setStyle = (el, key, value) => {\n  const cacheStyle = el.style[key]\n  el.style[key] = value\n  return () => {\n    el.style[key] = cacheStyle\n  }\n}\n\nexport const getPosition = e => {\n  const { clientX: x, clientY: y } = e.targetTouches ? e.targetTouches[0] : e\n  return { x, y }\n}\n\nexport const capitalize = s => {\n  return s.charAt(0).toUpperCase() + s.slice(1)\n}\n\nexport const clamp = (min, num, max) => {\n  if (typeof min !== 'number') {\n    min = Math.min(num, max) || num\n  }\n  if (typeof max !== 'number') {\n    max = Math.max(num, min)\n  }\n  return Math.min(Math.max(num, min), max)\n}\n\nexport const trimPx = distance => {\n  return (distance && Number(distance.replace(/px$/, ''))) || 0\n}\n\nexport const validDragElement = (e, el, dragSelector) => {\n  if (dragSelector === '') return true\n  const list = [...el.querySelectorAll(dragSelector)]\n  return list.includes(e.target)\n}\n\nconst pointerType = {\n  down: {\n    pc: 'mousedown',\n    m: 'touchstart'\n  },\n  move: {\n    pc: 'mousemove',\n    m: 'touchmove'\n  },\n  up: {\n    pc: 'mouseup',\n    m: 'touchend'\n  }\n}\nexport const addListener = (type, el, callback) => {\n  el && el.addEventListener(pointerType[type].pc, callback)\n  el && el.addEventListener(pointerType[type].m, callback, { passive: false })\n}\nexport const removeListener = (type, el, callback) => {\n  el && el.removeEventListener(pointerType[type].pc, callback)\n  el && el.removeEventListener(pointerType[type].m, callback)\n}\n","// stolen from body-scroll-lock\n\n// Older browsers don't support event options, feature detect it.\nlet hasPassiveEvents = false\nif (typeof window !== 'undefined') {\n  const passiveTestOptions = {\n    get passive() {\n      hasPassiveEvents = true\n      return undefined\n    }\n  }\n  window.addEventListener('testPassive', null, passiveTestOptions)\n  window.removeEventListener('testPassive', null, passiveTestOptions)\n}\n\nconst isIosDevice =\n  typeof window !== 'undefined' &&\n  window.navigator &&\n  window.navigator.platform &&\n  (/iP(ad|hone|od)/.test(window.navigator.platform) ||\n    (window.navigator.platform === 'MacIntel' && window.navigator.maxTouchPoints > 1))\n\nlet locks = []\nlet documentListenerAdded = false\nlet clientY = 0\nlet initialClientY = -1\nlet previousBodyOverflowSetting\nlet previousBodyPaddingRight\n\nconst hasScrollbar = el => {\n  if (!el || el.nodeType !== Node.ELEMENT_NODE) return false\n\n  const style = window.getComputedStyle(el)\n  return ['auto', 'scroll'].includes(style.overflowY) && el.scrollHeight > el.clientHeight\n}\n\nconst shouldScroll = (el, delta) => {\n  if (el.scrollTop === 0 && delta < 0) return false\n  if (el.scrollTop + el.clientHeight + delta >= el.scrollHeight && delta > 0) return false\n  return true\n}\n\nconst composedPath = el => {\n  const path = []\n  while (el) {\n    path.push(el)\n    if (el.classList.contains('vfm')) return path\n    el = el.parentElement\n  }\n  return path\n}\n\nconst hasAnyScrollableEl = (el, delta) => {\n  let hasAnyScrollableEl = false\n  const path = composedPath(el)\n  path.forEach(el => {\n    if (hasScrollbar(el) && shouldScroll(el, delta)) {\n      hasAnyScrollableEl = true\n    }\n  })\n  return hasAnyScrollableEl\n}\n\n// returns true if `el` should be allowed to receive touchmove events.\nconst allowTouchMove = el => locks.some(() => hasAnyScrollableEl(el, -clientY))\n\nconst preventDefault = rawEvent => {\n  const e = rawEvent || window.event\n\n  // For the case whereby consumers adds a touchmove event listener to document.\n  // Recall that we do document.addEventListener('touchmove', preventDefault, { passive: false })\n  // in disableBodyScroll - so if we provide this opportunity to allowTouchMove, then\n  // the touchmove event on document will break.\n  if (allowTouchMove(e.target)) {\n    return true\n  }\n  // Do not prevent if the event has more than one touch (usually meaning this is a multi touch gesture like pinch to zoom).\n  if (e.touches.length > 1) return true\n\n  if (e.preventDefault) e.preventDefault()\n\n  return false\n}\n\nconst setOverflowHidden = options => {\n  // If previousBodyPaddingRight is already set, don't set it again.\n  if (previousBodyPaddingRight === undefined) {\n    const reserveScrollBarGap = !!options && options.reserveScrollBarGap === true\n    const scrollBarGap = window.innerWidth - document.documentElement.clientWidth\n\n    if (reserveScrollBarGap && scrollBarGap > 0) {\n      const computedBodyPaddingRight = parseInt(getComputedStyle(document.body).getPropertyValue('padding-right'), 10)\n      previousBodyPaddingRight = document.body.style.paddingRight\n      document.body.style.paddingRight = `${computedBodyPaddingRight + scrollBarGap}px`\n    }\n  }\n  // If previousBodyOverflowSetting is already set, don't set it again.\n  if (previousBodyOverflowSetting === undefined) {\n    previousBodyOverflowSetting = document.body.style.overflow\n    document.body.style.overflow = 'hidden'\n  }\n}\n\nconst restoreOverflowSetting = () => {\n  if (previousBodyPaddingRight !== undefined) {\n    document.body.style.paddingRight = previousBodyPaddingRight\n\n    // Restore previousBodyPaddingRight to undefined so setOverflowHidden knows it\n    // can be set again.\n    previousBodyPaddingRight = undefined\n  }\n\n  if (previousBodyOverflowSetting !== undefined) {\n    document.body.style.overflow = previousBodyOverflowSetting\n\n    // Restore previousBodyOverflowSetting to undefined\n    // so setOverflowHidden knows it can be set again.\n    previousBodyOverflowSetting = undefined\n  }\n}\n// https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#Problems_and_solutions\nconst isTargetElementTotallyScrolled = targetElement =>\n  targetElement ? targetElement.scrollHeight - targetElement.scrollTop <= targetElement.clientHeight : false\n\nconst handleScroll = (event, targetElement) => {\n  clientY = event.targetTouches[0].clientY - initialClientY\n\n  if (allowTouchMove(event.target)) {\n    return false\n  }\n\n  if (targetElement && targetElement.scrollTop === 0 && clientY > 0) {\n    // element is at the top of its scroll.\n    return preventDefault(event)\n  }\n\n  if (isTargetElementTotallyScrolled(targetElement) && clientY < 0) {\n    // element is at the bottom of its scroll.\n    return preventDefault(event)\n  }\n\n  event.stopPropagation()\n  return true\n}\n\nexport const disableBodyScroll = (targetElement, options) => {\n  // targetElement must be provided\n  if (!targetElement) {\n    // eslint-disable-next-line no-console\n    console.error(\n      'disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.'\n    )\n    return\n  }\n\n  // disableBodyScroll must not have been called on this targetElement before\n  if (locks.some(lock => lock.targetElement === targetElement)) {\n    return\n  }\n\n  const lock = {\n    targetElement,\n    options: options || {}\n  }\n\n  locks = [...locks, lock]\n\n  if (isIosDevice) {\n    targetElement.ontouchstart = event => {\n      if (event.targetTouches.length === 1) {\n        // detect single touch.\n        initialClientY = event.targetTouches[0].clientY\n      }\n    }\n    targetElement.ontouchmove = event => {\n      if (event.targetTouches.length === 1) {\n        // detect single touch.\n        handleScroll(event, targetElement)\n      }\n    }\n\n    if (!documentListenerAdded) {\n      document.addEventListener('touchmove', preventDefault, hasPassiveEvents ? { passive: false } : undefined)\n      documentListenerAdded = true\n    }\n  } else {\n    setOverflowHidden(options)\n  }\n}\n\nexport const enableBodyScroll = targetElement => {\n  if (!targetElement) {\n    // eslint-disable-next-line no-console\n    console.error(\n      'enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices.'\n    )\n    return\n  }\n\n  locks = locks.filter(lock => lock.targetElement !== targetElement)\n\n  if (isIosDevice) {\n    targetElement.ontouchstart = null\n    targetElement.ontouchmove = null\n\n    if (documentListenerAdded && locks.length === 0) {\n      document.removeEventListener('touchmove', preventDefault, hasPassiveEvents ? { passive: false } : undefined)\n      documentListenerAdded = false\n    }\n  } else if (!locks.length) {\n    restoreOverflowSetting()\n  }\n}\n","<template>\n  <div\n    v-if=\"ssr || visible\"\n    v-show=\"!ssr || visible\"\n    :style=\"bindStyle\"\n    class=\"vfm vfm--inset\"\n    :class=\"[attach === false ? 'vfm--fixed' : 'vfm--absolute', { 'vfm--prevent-none': preventClick }]\"\n    @keydown.esc=\"onEsc\"\n  >\n    <transition\n      ref=\"vfmOverlayTransition\"\n      v-bind=\"computedOverlayTransition\"\n      @before-enter=\"beforeOverlayEnter\"\n      @after-enter=\"afterOverlayEnter\"\n      @before-leave=\"beforeOverlayLeave\"\n      @after-leave=\"afterOverlayLeave\"\n    >\n      <div\n        v-show=\"!hideOverlay && visibility.overlay\"\n        class=\"vfm__overlay vfm--overlay vfm--absolute vfm--inset\"\n        :class=\"overlayClass\"\n        :style=\"overlayStyle\"\n      ></div>\n    </transition>\n    <transition\n      ref=\"vfmTransition\"\n      v-bind=\"computedTransition\"\n      @before-enter=\"beforeModalEnter\"\n      @after-enter=\"afterModalEnter\"\n      @before-leave=\"beforeModalLeave\"\n      @after-leave=\"afterModalLeave\"\n    >\n      <div\n        v-show=\"visibility.modal\"\n        ref=\"vfmContainer\"\n        class=\"vfm__container vfm--absolute vfm--inset vfm--outline-none\"\n        :class=\"classes\"\n        :style=\"styles\"\n        :aria-expanded=\"visibility.modal.toString()\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        tabindex=\"-1\"\n        @mouseup.self=\"onMouseupContainer\"\n        @mousedown.self=\"onMousedown\"\n      >\n        <div\n          ref=\"vfmContent\"\n          class=\"vfm__content\"\n          :class=\"[contentClass, { 'vfm--prevent-auto': preventClick }]\"\n          :style=\"bindContentStyle\"\n          @mousedown=\"onMousedown(null)\"\n        >\n          <slot :params=\"params\" :close=\"() => $emit('input', false)\" />\n          <div\n            v-if=\"visibility.resize && visibility.modal\"\n            ref=\"vfmResize\"\n            class=\"vfm__resize vfm--absolute vfm--inset vfm--prevent-none vfm--select-none vfm--touch-none\"\n          >\n            <div\n              v-for=\"direction in resizeDirections\"\n              :key=\"direction\"\n              :direction=\"direction\"\n              :class=\"`vfm--resize-${direction}`\"\n              class=\"vfm--absolute vfm--prevent-auto\"\n            ></div>\n          </div>\n        </div>\n      </div>\n    </transition>\n  </div>\n</template>\n\n<script>\nimport FocusTrap from './utils/focusTrap.js'\nimport {\n  setStyle,\n  getPosition,\n  capitalize,\n  clamp,\n  trimPx,\n  validDragElement,\n  addListener,\n  removeListener\n} from './utils/dragResize.js'\nimport { disableBodyScroll, enableBodyScroll } from './utils/bodyScrollLock'\n\nconst noop = () => {}\n\nconst TransitionState = {\n  Enter: 'enter',\n  Entering: 'entering',\n  Leave: 'leave',\n  Leaving: 'leavng'\n}\n\nfunction validateAttachTarget(val) {\n  const type = typeof val\n\n  if (type === 'boolean' || type === 'string') return true\n\n  return val.nodeType === Node.ELEMENT_NODE\n}\n\nconst CLASS_PROP = {\n  type: [String, Object, Array],\n  default: ''\n}\n\nconst STYLE_PROP = {\n  type: [Object, Array],\n  default: () => ({})\n}\n\nconst resizeCursor = {\n  t: 'ns-resize',\n  tr: 'nesw-resize',\n  r: 'ew-resize',\n  br: 'nwse-resize',\n  b: 'ns-resize',\n  bl: 'nesw-resize',\n  l: 'ew-resize',\n  tl: 'nwse-resize'\n}\n\nexport default {\n  props: {\n    name: { type: String, default: null },\n    value: { type: Boolean, default: false },\n    ssr: { type: Boolean, default: true },\n    classes: CLASS_PROP,\n    overlayClass: CLASS_PROP,\n    contentClass: CLASS_PROP,\n    styles: STYLE_PROP,\n    overlayStyle: STYLE_PROP,\n    contentStyle: STYLE_PROP,\n    lockScroll: { type: Boolean, default: true },\n    hideOverlay: { type: Boolean, default: false },\n    clickToClose: { type: Boolean, default: true },\n    escToClose: { type: Boolean, default: false },\n    preventClick: { type: Boolean, default: false },\n    attach: { type: null, default: false, validator: validateAttachTarget },\n    transition: { type: [String, Object], default: 'vfm' },\n    overlayTransition: { type: [String, Object], default: 'vfm' },\n    zIndexAuto: { type: Boolean, default: true },\n    zIndexBase: { type: [String, Number], default: 1000 },\n    zIndex: { type: [Boolean, String, Number], default: false },\n    focusRetain: { type: Boolean, default: true },\n    focusTrap: { type: Boolean, default: false },\n    fitParent: { type: Boolean, default: true },\n    drag: { type: Boolean, default: false },\n    dragSelector: { type: String, default: '' },\n    keepChangedStyle: { type: Boolean, default: false },\n    resize: {\n      type: Boolean,\n      default: false\n    },\n    resizeDirections: {\n      type: Array,\n      default: () => ['t', 'tr', 'r', 'br', 'b', 'bl', 'l', 'tl'],\n      validator: val =>\n        ['t', 'tr', 'r', 'br', 'b', 'bl', 'l', 'tl'].filter(value => val.indexOf(value) !== -1).length === val.length\n    },\n    minWidth: { type: Number, default: 0 },\n    minHeight: { type: Number, default: 0 },\n    maxWidth: { type: Number, default: Infinity },\n    maxHeight: { type: Number, default: Infinity }\n  },\n  data: () => ({\n    modalStackIndex: null,\n    visible: false,\n    visibility: {\n      modal: false,\n      overlay: false,\n      resize: false\n    },\n    overlayTransitionState: null,\n    modalTransitionState: null,\n    stopEvent: false,\n    params: {},\n    dragResizeStyle: {},\n    resolveToggle: noop,\n    rejectToggle: noop,\n    state: null,\n    lastMousedownEl: null\n  }),\n  computed: {\n    isComponentReadyToBeDestroyed() {\n      return (\n        (this.hideOverlay || this.overlayTransitionState === TransitionState.Leave) &&\n        this.modalTransitionState === TransitionState.Leave\n      )\n    },\n    calculateZIndex() {\n      if (this.zIndex === false) {\n        if (this.zIndexAuto) {\n          return +this.zIndexBase + 2 * (this.modalStackIndex || 0)\n        } else {\n          return false\n        }\n      } else {\n        return this.zIndex\n      }\n    },\n    bindStyle() {\n      return {\n        ...(this.calculateZIndex !== false && { zIndex: this.calculateZIndex })\n      }\n    },\n    bindContentStyle() {\n      let style = [this.dragResizeStyle]\n      Array.isArray(this.contentStyle) ? style.push(...this.contentStyle) : style.push(this.contentStyle)\n      return style\n    },\n    computedTransition() {\n      if (typeof this.transition === 'string') return { name: this.transition }\n      return { ...this.transition }\n    },\n    computedOverlayTransition() {\n      if (typeof this.overlayTransition === 'string') return { name: this.overlayTransition }\n      return { ...this.overlayTransition }\n    }\n  },\n  watch: {\n    value(value) {\n      if (this.stopEvent) {\n        this.stopEvent = false\n        return\n      }\n      this.mounted()\n      if (!value) {\n        if (this.emitEvent('before-close', true)) {\n          this.rejectToggle('hide')\n          return\n        }\n        this.close()\n      }\n    },\n    lockScroll: 'handleLockScroll',\n    hideOverlay(value) {\n      if (this.value && !value) {\n        this.visibility.overlay = true\n      }\n    },\n    attach: 'mounted',\n    isComponentReadyToBeDestroyed(isReady) {\n      if (isReady) {\n        this.visible = false\n      }\n    },\n    drag(value) {\n      if (this.visible) {\n        value ? this.addDragDown() : this.removeDragDown()\n      }\n    },\n    resize(value) {\n      if (this.visible) {\n        value ? this.addResizeDown() : this.removeResizeDown()\n      }\n    },\n    keepChangedStyle(value) {\n      if (!value) {\n        this.dragResizeStyle = {}\n      }\n    }\n  },\n  created() {\n    this.api.modals.push(this)\n  },\n  mounted() {\n    this.$focusTrap = new FocusTrap()\n    this.mounted()\n  },\n  beforeDestroy() {\n    this.close()\n    this.lockScroll && this.$refs.vfmContainer && enableBodyScroll(this.$refs.vfmContainer)\n    this?.$el?.remove()\n\n    let index = this.api.modals.findIndex(vm => vm === this)\n    this.api.modals.splice(index, 1)\n  },\n  methods: {\n    mounted() {\n      if (this.value) {\n        if (this.emitEvent('before-open', false)) {\n          this.rejectToggle('show')\n          return\n        }\n        let target = this.getAttachElement()\n        if (target || this.attach === false) {\n          this.attach !== false && target.appendChild(this.$el)\n\n          let index = this.api.openedModals.findIndex(vm => vm === this)\n          if (index !== -1) {\n            // if this is already exist in modalStack, delete it\n            this.api.openedModals.splice(index, 1)\n          }\n          this.api.openedModals.push(this)\n\n          this.modalStackIndex = this.api.openedModals.length - 1\n\n          this.handleLockScroll()\n          this.api.openedModals\n            .filter(vm => vm !== this)\n            .forEach((vm, index) => {\n              if (vm.getAttachElement() === target) {\n                // if vm and this have the same attach element\n                vm.modalStackIndex = index\n                vm.visibility.overlay = false\n              }\n            })\n\n          this.visible = true\n          this.$nextTick(() => {\n            this.startTransitionEnter()\n          })\n        } else if (target !== false) {\n          console.warn('Unable to locate target '.concat(this.attach))\n        }\n      }\n    },\n    close() {\n      let index = this.api.openedModals.findIndex(vm => vm === this)\n      if (index !== -1) {\n        // remove this in modalStack\n        this.api.openedModals.splice(index, 1)\n      }\n      if (this.api.openedModals.length > 0) {\n        // If there are still nested modals opened\n        const $_vm = this.api.openedModals[this.api.openedModals.length - 1]\n        if ($_vm.focusRetain || $_vm.focusTrap) {\n          $_vm.$refs.vfmContainer.focus()\n        }\n        !$_vm.hideOverlay && ($_vm.visibility.overlay = true)\n      }\n      this.drag && this.removeDragDown()\n      this.resize && this.removeResizeDown()\n      this.state = null\n\n      this.startTransitionLeave()\n    },\n    startTransitionEnter() {\n      this.visibility.overlay = true\n      this.visibility.modal = true\n    },\n    startTransitionLeave() {\n      this.visibility.overlay = false\n      this.visibility.modal = false\n    },\n    handleLockScroll() {\n      if (this.value) {\n        this.$nextTick(() => {\n          if (this.lockScroll) {\n            disableBodyScroll(this.$refs.vfmContainer, {\n              reserveScrollBarGap: true\n            })\n          } else {\n            enableBodyScroll(this.$refs.vfmContainer)\n          }\n        })\n      }\n    },\n    getAttachElement() {\n      let target\n      if (this.attach === false) {\n        target = false\n      } else if (typeof this.attach === 'string') {\n        // CSS selector\n        if (window) {\n          target = window.document.querySelector(this.attach)\n        } else {\n          target = false\n        }\n      } else {\n        // DOM Element\n        target = this.attach\n      }\n      return target\n    },\n    beforeOverlayEnter() {\n      this.overlayTransitionState = TransitionState.Entering\n    },\n    afterOverlayEnter() {\n      this.overlayTransitionState = TransitionState.Enter\n    },\n    beforeOverlayLeave() {\n      this.overlayTransitionState = TransitionState.Leaving\n    },\n    afterOverlayLeave() {\n      this.overlayTransitionState = TransitionState.Leave\n    },\n    beforeModalEnter() {\n      this.modalTransitionState = TransitionState.Entering\n    },\n    afterModalEnter() {\n      this.modalTransitionState = TransitionState.Enter\n      if (this.focusRetain || this.focusTrap) {\n        this.$refs.vfmContainer.focus()\n      }\n      this.focusTrap && this.$focusTrap.enable(this.$refs.vfmContainer)\n      this.drag && this.addDragDown()\n      this.resize && this.addResizeDown()\n\n      this.$emit('opened', this.createModalEvent({ type: 'opened' }))\n      this.resolveToggle('show')\n    },\n    beforeModalLeave() {\n      this.modalTransitionState = TransitionState.Leaving\n\n      if (this.$focusTrap.enabled()) {\n        this.$focusTrap.disable()\n      }\n    },\n    afterModalLeave() {\n      this.modalTransitionState = TransitionState.Leave\n      this.modalStackIndex = null\n      this.lockScroll && enableBodyScroll(this.$refs.vfmContainer)\n      if (!this.keepChangedStyle) {\n        this.dragResizeStyle = {}\n      }\n\n      let stopEvent = false\n      const event = this.createModalEvent({\n        type: 'closed',\n        stop() {\n          stopEvent = true\n        }\n      })\n      this.$emit('closed', event)\n      this.resolveToggle('hide')\n      if (stopEvent) return\n      this.params = {}\n    },\n    onMousedown(e) {\n      this.lastMousedownEl = e?.target\n    },\n    onMouseupContainer() {\n      // skip when the lastMousedownEl didn't equal $refs.vfmContainer\n      if (this.lastMousedownEl !== this.$refs.vfmContainer) return\n      // skip when state equal 'resize:move'\n      if (this.state === 'resize:move') return\n      this.$emit('click-outside', this.createModalEvent({ type: 'click-outside' }))\n      this.clickToClose && this.$emit('input', false)\n    },\n    onEsc() {\n      if (this.visible && this.escToClose) {\n        this.$emit('input', false)\n      }\n    },\n    createModalEvent(eventProps = {}) {\n      return {\n        ref: this,\n        ...eventProps\n      }\n    },\n    emitEvent(eventType, value) {\n      let stopEvent = false\n      const event = this.createModalEvent({\n        type: eventType,\n        stop() {\n          stopEvent = true\n        }\n      })\n      this.$emit(eventType, event)\n      if (stopEvent) {\n        this.stopEvent = true\n        this.$emit('input', value)\n        return true\n      }\n      return false\n    },\n    emitState(e, state, action) {\n      this.state = `${state}:${action}`\n      this.$emit(this.state, e)\n    },\n    toggle(show, params) {\n      return new Promise((resolve, reject) => {\n        this.resolveToggle = res => {\n          resolve(res)\n          this.resolveToggle = noop\n        }\n        this.rejectToggle = err => {\n          reject(err)\n          this.rejectToggle = noop\n        }\n        const value = typeof show === 'boolean' ? show : !this.value\n        if (value && arguments.length === 2) {\n          this.params = params\n        }\n        this.$emit('input', value)\n      })\n    },\n    pointerDown(e) {\n      e.stopPropagation()\n      const STATE_RESIZE = 'resize'\n      const STATE_DRAG = 'drag'\n      const { vfmContainer, vfmContent } = this.$refs\n      const direction = e.target.getAttribute('direction')\n      let state\n      if (direction) {\n        state = STATE_RESIZE\n      } else if (validDragElement(e, vfmContent, this.dragSelector)) {\n        state = STATE_DRAG\n      } else {\n        return\n      }\n      this.emitState(e, state, 'start')\n      const down = getPosition(e)\n      const rectContainer = vfmContainer.getBoundingClientRect()\n      const rectContent = vfmContent.getBoundingClientRect()\n      const isAbsolute = window.getComputedStyle(vfmContent).position === 'absolute'\n      const position = {\n        top: trimPx(this.dragResizeStyle.top),\n        left: trimPx(this.dragResizeStyle.left)\n      }\n      const limit = (() => {\n        if (this.fitParent) {\n          const limit = {\n            absolute() {\n              return {\n                minTop: 0,\n                minLeft: 0,\n                maxTop: rectContainer.height - rectContent.height,\n                maxLeft: rectContainer.width - rectContent.width\n              }\n            },\n            relative() {\n              return {\n                minTop: position.top + rectContainer.top - rectContent.top,\n                minLeft: position.left + rectContainer.left - rectContent.left,\n                maxTop: position.top + rectContainer.bottom - rectContent.bottom,\n                maxLeft: position.left + rectContainer.right - rectContent.right\n              }\n            }\n          }\n          return isAbsolute ? limit.absolute() : limit.relative()\n        } else {\n          return {}\n        }\n      })()\n      const resetBodyCursor = state === STATE_RESIZE && setStyle(document.body, 'cursor', resizeCursor[direction])\n\n      const moving = e => {\n        // onPointerMove\n        e.stopPropagation()\n        this.emitState(e, state, 'move')\n        const move = getPosition(e)\n        let offset = {\n          x: move.x - down.x,\n          y: move.y - down.y\n        }\n        if (state === STATE_RESIZE) {\n          offset = this.getResizeOffset(direction, offset, rectContainer, rectContent, isAbsolute)\n        }\n\n        let top\n        let left\n        if (isAbsolute) {\n          top = rectContent.top - rectContainer.top + offset.y\n          left = rectContent.left - rectContainer.left + offset.x\n        } else {\n          top = position.top + offset.y\n          left = position.left + offset.x\n        }\n        if (state === STATE_DRAG && this.fitParent) {\n          top = clamp(limit.minTop, top, limit.maxTop)\n          left = clamp(limit.minLeft, left, limit.maxLeft)\n        }\n        const style = {\n          position: 'relative',\n          top: top + 'px',\n          left: left + 'px',\n          margin: 'unset',\n          touchAction: 'none',\n          ...(isAbsolute && {\n            position: 'absolute',\n            transform: 'unset',\n            width: rectContent.width + 'px',\n            height: rectContent.height + 'px'\n          }),\n          ...(offset.width && { width: offset.width + 'px' }),\n          ...(offset.height && { height: offset.height + 'px' })\n        }\n\n        this.dragResizeStyle = {\n          ...this.dragResizeStyle,\n          ...style\n        }\n      }\n      const end = e => {\n        // onPointerUp\n        e.stopPropagation()\n        if (state === STATE_RESIZE) {\n          resetBodyCursor && resetBodyCursor()\n        }\n        // Excute onClickContainer before trigger emitState\n        setTimeout(() => {\n          this.emitState(e, state, 'end')\n        })\n        removeListener('move', document, moving)\n        removeListener('up', document, end)\n      }\n      addListener('move', document, moving)\n      addListener('up', document, end)\n    },\n    addDragDown() {\n      addListener('down', this.$refs.vfmContent, this.pointerDown)\n      this.dragResizeStyle.touchAction = 'none'\n    },\n    removeDragDown() {\n      removeListener('down', this.$refs.vfmContent, this.pointerDown)\n    },\n    addResizeDown() {\n      this.visibility.resize = true\n      this.$nextTick(() => {\n        addListener('down', this.$refs.vfmResize, this.pointerDown)\n      })\n    },\n    removeResizeDown() {\n      removeListener('down', this.$refs.vfmResize, this.pointerDown)\n      this.visibility.resize = false\n    },\n    getResizeOffset(direction, offset, rectContainer, rectContent, isAbsolute) {\n      const setOffset = dir => {\n        let offsetAxis = offset[dir.axis]\n        offsetAxis = this.fitParent ? clamp(dir.min, offsetAxis, dir.max) : offsetAxis\n        let edge = clamp(dir.minEdge, dir.getEdge(offsetAxis), dir.maxEdge)\n        offsetAxis = dir.getOffsetAxis(edge, isAbsolute)\n        return {\n          [dir.edgeName]: edge,\n          [dir.axis]: offsetAxis\n        }\n      }\n\n      const getDirectionInfo = (position, edgeName, axis, isPositive) => {\n        const rectContentEdge = rectContent[edgeName]\n        const positionOffset = rectContainer[position] - rectContent[position]\n        const EdgeName = capitalize(edgeName)\n        return {\n          axis,\n          edgeName,\n          min: isPositive ? positionOffset : -rectContentEdge,\n          max: isPositive ? rectContentEdge : positionOffset,\n          minEdge: this[`min${EdgeName}`],\n          maxEdge: this[`max${EdgeName}`],\n          getEdge: offsetAxis => rectContent[edgeName] - offsetAxis * (isPositive ? 1 : -1),\n          getOffsetAxis: (edge, isAbsolute) => {\n            const offsetAxis = rectContent[edgeName] - edge\n            if (isAbsolute) {\n              return isPositive ? offsetAxis : 0\n            } else {\n              return ((isPositive ? 1 : -1) * offsetAxis) / 2\n            }\n          }\n        }\n      }\n\n      const directions = {\n        t: ['top', 'height', 'y', true],\n        b: ['bottom', 'height', 'y', false],\n        l: ['left', 'width', 'x', true],\n        r: ['right', 'width', 'x', false]\n      }\n\n      let _offset = { x: 0, y: 0 }\n      direction.split('').forEach(dir => {\n        const directionInfo = getDirectionInfo(...directions[dir])\n        _offset = {\n          ..._offset,\n          ...setOffset(directionInfo)\n        }\n      })\n      return _offset\n    }\n  }\n}\n</script>\n\n<style lang=\"css\" scoped>\n.vfm--fixed {\n  position: fixed;\n}\n.vfm--absolute {\n  position: absolute;\n}\n.vfm--inset {\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n}\n.vfm--overlay {\n  background-color: rgba(0, 0, 0, 0.5);\n}\n.vfm--prevent-none {\n  pointer-events: none;\n}\n.vfm--prevent-auto {\n  pointer-events: auto;\n}\n.vfm--outline-none:focus {\n  outline: none;\n}\n.vfm-enter-active,\n.vfm-leave-active {\n  transition: opacity 0.2s;\n}\n.vfm-enter,\n.vfm-leave-to {\n  opacity: 0;\n}\n\n.vfm--touch-none {\n  touch-action: none;\n}\n.vfm--select-none {\n  user-select: none;\n}\n\n.vfm--resize-tr,\n.vfm--resize-br,\n.vfm--resize-bl,\n.vfm--resize-tl {\n  width: 12px;\n  height: 12px;\n  z-index: 10;\n}\n\n.vfm--resize-t {\n  top: -6px;\n  left: 0;\n  width: 100%;\n  height: 12px;\n  cursor: ns-resize;\n}\n.vfm--resize-tr {\n  top: -6px;\n  right: -6px;\n  cursor: nesw-resize;\n}\n.vfm--resize-r {\n  top: 0;\n  right: -6px;\n  width: 12px;\n  height: 100%;\n  cursor: ew-resize;\n}\n.vfm--resize-br {\n  bottom: -6px;\n  right: -6px;\n  cursor: nwse-resize;\n}\n.vfm--resize-b {\n  bottom: -6px;\n  left: 0;\n  width: 100%;\n  height: 12px;\n  cursor: ns-resize;\n}\n.vfm--resize-bl {\n  bottom: -6px;\n  left: -6px;\n  cursor: nesw-resize;\n}\n.vfm--resize-l {\n  top: 0;\n  left: -6px;\n  width: 12px;\n  height: 100%;\n  cursor: ew-resize;\n}\n.vfm--resize-tl {\n  top: -6px;\n  left: -6px;\n  cursor: nwse-resize;\n}\n</style>\n","import Vue from 'vue'\nimport VModal from './VModal.vue'\nimport VDynamicModals from './VDynamicModals.vue'\n\nexport function createApi() {\n  let _modalComponent = null\n\n  return Vue.observable({\n    show(modal, ...args) {\n      switch (typeof modal) {\n        case 'string':\n          return this.toggle(modal, true, ...args)\n        case 'object': {\n          return Promise.allSettled([\n            new Promise((resolve, reject) => {\n              const defaultModal = {\n                value: true,\n                id: Symbol('dynamicModal'),\n                component: _modalComponent,\n                bind: {},\n                slots: {},\n                on: {},\n                params: args[0],\n                reject,\n                opened() {\n                  resolve('show')\n                }\n              }\n              this.dynamicModals.push(Object.assign(defaultModal, modal))\n            })\n          ])\n        }\n      }\n    },\n    hide(...names) {\n      return this.toggle(names, false)\n    },\n    hideAll() {\n      return this.hide(...this.openedModals.map(modal => modal.name))\n    },\n    toggle(name, ...args) {\n      const modals = Array.isArray(name) ? this.get(...name) : this.get(name)\n      return Promise.allSettled(modals.map(modal => modal.toggle(...args)))\n    },\n    get(...names) {\n      return this.modals.filter(modal => names.includes(modal.name))\n    },\n    dynamicModals: [],\n    openedModals: [],\n    modals: [],\n    _setDefaultModal(modalComponent) {\n      _modalComponent = modalComponent\n    }\n  })\n}\n\nexport function bindApi(component, api) {\n  const _component = { ...component, props: { ...component.props } }\n  Object.assign(_component.props, {\n    api: { type: Object, default: () => api }\n  })\n  return _component\n}\n\nexport function createModal(api) {\n  const modalComponent = bindApi(VModal, api)\n  api._setDefaultModal(modalComponent)\n  return modalComponent\n}\n\nexport function createContainer(api) {\n  return bindApi(VDynamicModals, api)\n}\n","import { createApi, createModal, createContainer } from './PluginCore'\n\n/**\n * @description Ensure that `_vfm` is used when function `installPlugin` is executed for the first time\n */\nlet _count = 0\n\nconst _key = '$modal'\nconst _name = 'VModal'\nconst _containerName = 'VDynamicModals'\n\n/**\n * @description Support create multiple vfm instance\n */\nexport const createVfm = () => {\n  let api = createApi()\n  return {\n    [_key]: api,\n    [_name]: createModal(api),\n    [_containerName]: createContainer(api)\n  }\n}\n\n/**\n * @description Create a vfm instance by default for directly support `import { $modal, VModal, VDynamicModals } from 'vue-final-modal'`\n */\nconst _vfm = createVfm()\nexport const { $modal, VModal, VDynamicModals } = _vfm\n\n/**\n * @description Register vfm instance globally\n */\nexport const installVfm = (Vue, options = {}) => {\n  const { $modal, VModal, VDynamicModals } = _count === 0 ? _vfm : createVfm()\n  _count += 1\n  const key = options[_key] || _key\n  const name = options[_name] || _name\n  const containerName = options[_containerName] || _containerName\n  Vue.prototype[key] = $modal\n  Vue.component(name, VModal)\n  Vue.component(containerName, VDynamicModals)\n}\n\n/**\n * @description Vue plugin for register vfm instance globally\n */\nexport const vfmPlugin = pluginOptions => ({\n  install(Vue, options) {\n    const _options = Object.assign({}, pluginOptions, options)\n    installVfm(Vue, _options)\n  }\n})\n\nvfmPlugin.install = installVfm\n"],"names":["queryFocusableElements","element","selector","querySelectorAll","isFocused","document","activeElement","FocusTrap","root","elements","onKeyDown","this","bind","enable","disable","firstElement","lastElement","length","event","key","keyCode","isTabPressed","shiftKey","focus","preventDefault","addEventListener","removeEventListener","getPosition","e","targetTouches","x","clientX","y","clientY","clamp","min","num","max","Math","trimPx","distance","Number","replace","pointerType","down","pc","m","move","up","addListener","type","el","callback","passive","removeListener","hasPassiveEvents","window","passiveTestOptions","previousBodyOverflowSetting","previousBodyPaddingRight","isIosDevice","navigator","platform","test","maxTouchPoints","locks","documentListenerAdded","initialClientY","hasAnyScrollableEl","delta","path","push","classList","contains","parentElement","composedPath","forEach","nodeType","Node","ELEMENT_NODE","style","getComputedStyle","includes","overflowY","scrollHeight","clientHeight","hasScrollbar","scrollTop","shouldScroll","allowTouchMove","some","rawEvent","target","touches","disableBodyScroll","targetElement","options","lock","ontouchstart","ontouchmove","isTargetElementTotallyScrolled","stopPropagation","handleScroll","undefined","reserveScrollBarGap","scrollBarGap","innerWidth","documentElement","clientWidth","computedBodyPaddingRight","parseInt","body","getPropertyValue","paddingRight","overflow","setOverflowHidden","console","error","enableBodyScroll","filter","dragSelector","value","cacheStyle","s","charAt","toUpperCase","slice","bindApi","component","api","_component","props","Object","assign","_count","_key","createVfm","_modalComponent","Vue","observable","show","modal","args","toggle","Promise","allSettled","resolve","reject","defaultModal","id","Symbol","slots","on","params","opened","_this","dynamicModals","hide","names","hideAll","openedModals","map","name","modals","Array","isArray","get","_setDefaultModal","modalComponent","VModal","createModal","VDynamicModals","createContainer","_vfm","$modal","installVfm","containerName","prototype","vfmPlugin","pluginOptions","install","_options"],"mappings":"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"}
\ No newline at end of file
diff --git a/dist/VueFinalModal.umd.js b/dist/VueFinalModal.umd.js
index b5e78e22..79b30e8a 100644
--- a/dist/VueFinalModal.umd.js
+++ b/dist/VueFinalModal.umd.js
@@ -1,2 +1,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).VueFinalModal=t()}(this,(function(){"use strict";function e(t){return(e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(t)}function t(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function n(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);t&&(i=i.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,i)}return n}function o(e){for(var t=1;t<arguments.length;t++){var o=null!=arguments[t]?arguments[t]:{};t%2?i(Object(o),!0).forEach((function(t){n(e,t,o[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(o)):i(Object(o)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(o,t))}))}return e}function r(e){return function(e){if(Array.isArray(e))return a(e)}(e)||function(e){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e))return Array.from(e)}(e)||function(e,t){if(!e)return;if("string"==typeof e)return a(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return a(e,t)}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function a(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,i=new Array(t);n<t;n++)i[n]=e[n];return i}var s=function(e){return function(e,t){return r(e.querySelectorAll(t)||[])}(e,'button:not([disabled]), select:not([disabled]), a[href]:not([disabled]), area[href]:not([disabled]), [contentEditable=""]:not([disabled]), [contentEditable="true"]:not([disabled]), [contentEditable="TRUE"]:not([disabled]), textarea:not([disabled]), iframe:not([disabled]), input:not([disabled]), summary:not([disabled]), [tabindex]:not([tabindex="-1"])')},l=function(e){return e==document.activeElement},c=function(){function e(){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.root=null,this.elements=[],this.onKeyDown=this.onKeyDown.bind(this),this.enable=this.enable.bind(this),this.disable=this.disable.bind(this),this.firstElement=this.firstElement.bind(this),this.lastElement=this.lastElement.bind(this)}var n,i,o;return n=e,(i=[{key:"lastElement",value:function(){return this.elements[this.elements.length-1]||null}},{key:"firstElement",value:function(){return this.elements[0]||null}},{key:"onKeyDown",value:function(e){if(function(e){return"Tab"===e.key||9===e.keyCode}(e)){if(!e.shiftKey)return!document.activeElement||l(this.lastElement())?(this.firstElement().focus(),void e.preventDefault()):void 0;l(this.firstElement())&&(this.lastElement().focus(),e.preventDefault())}}},{key:"enabled",value:function(){return!!this.root}},{key:"enable",value:function(e){e&&(this.root=e,this.elements=s(this.root),this.root.addEventListener("keydown",this.onKeyDown))}},{key:"disable",value:function(){this.root.removeEventListener("keydown",this.onKeyDown),this.root=null}}])&&t(n.prototype,i),o&&t(n,o),e}(),u=function(e){var t=e.targetTouches?e.targetTouches[0]:e;return{x:t.clientX,y:t.clientY}},d=function(e,t,n){return"number"!=typeof e&&(e=Math.min(t,n)||t),"number"!=typeof n&&(n=Math.max(t,e)),Math.min(Math.max(t,e),n)},f=function(e){return e&&Number(e.replace(/px$/,""))||0},v={down:{pc:"mousedown",m:"touchstart"},move:{pc:"mousemove",m:"touchmove"},up:{pc:"mouseup",m:"touchend"}},h=function(e,t,n){t&&t.addEventListener(v[e].pc,n),t&&t.addEventListener(v[e].m,n,{passive:!1})},m=function(e,t,n){t&&t.removeEventListener(v[e].pc,n),t&&t.removeEventListener(v[e].m,n)},p=!1;if("undefined"!=typeof window){var y={get passive(){p=!0}};window.addEventListener("testPassive",null,y),window.removeEventListener("testPassive",null,y)}var g,b,w="undefined"!=typeof window&&window.navigator&&window.navigator.platform&&(/iP(ad|hone|od)/.test(window.navigator.platform)||"MacIntel"===window.navigator.platform&&window.navigator.maxTouchPoints>1),x=[],S=!1,E=0,T=-1,z=function(e,t){var n=!1;return function(e){for(var t=[];e;){if(t.push(e),e.classList.contains("vfm"))return t;e=e.parentElement}return t}(e).forEach((function(e){(function(e){if(!e||e.nodeType!==Node.ELEMENT_NODE)return!1;var t=window.getComputedStyle(e);return["auto","scroll"].includes(t.overflowY)&&e.scrollHeight>e.clientHeight})(e)&&function(e,t){return!(0===e.scrollTop&&t<0||e.scrollTop+e.clientHeight+t>=e.scrollHeight&&t>0)}(e,t)&&(n=!0)})),n},C=function(e){return x.some((function(){return z(e,-E)}))},O=function(e){var t=e||window.event;return!!C(t.target)||(t.touches.length>1||(t.preventDefault&&t.preventDefault(),!1))},k=function(e,t){if(e){if(!x.some((function(t){return t.targetElement===e}))){var n={targetElement:e,options:t||{}};x=[].concat(r(x),[n]),w?(e.ontouchstart=function(e){1===e.targetTouches.length&&(T=e.targetTouches[0].clientY)},e.ontouchmove=function(t){1===t.targetTouches.length&&function(e,t){E=e.targetTouches[0].clientY-T,!C(e.target)&&(t&&0===t.scrollTop&&E>0||function(e){return!!e&&e.scrollHeight-e.scrollTop<=e.clientHeight}(t)&&E<0?O(e):e.stopPropagation())}(t,e)},S||(document.addEventListener("touchmove",O,p?{passive:!1}:void 0),S=!0)):function(e){if(void 0===b){var t=!!e&&!0===e.reserveScrollBarGap,n=window.innerWidth-document.documentElement.clientWidth;if(t&&n>0){var i=parseInt(getComputedStyle(document.body).getPropertyValue("padding-right"),10);b=document.body.style.paddingRight,document.body.style.paddingRight="".concat(i+n,"px")}}void 0===g&&(g=document.body.style.overflow,document.body.style.overflow="hidden")}(t)}}else console.error("disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.")},M=function(e){e?(x=x.filter((function(t){return t.targetElement!==e})),w?(e.ontouchstart=null,e.ontouchmove=null,S&&0===x.length&&(document.removeEventListener("touchmove",O,p?{passive:!1}:void 0),S=!1)):x.length||(void 0!==b&&(document.body.style.paddingRight=b,b=void 0),void 0!==g&&(document.body.style.overflow=g,g=void 0))):console.error("enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices.")},_=function(){},$="enter",D="entering",R="leave",j="leavng";var L={type:[String,Object,Array],default:""},A={type:[Object,Array],default:function(){return{}}},N={t:"ns-resize",tr:"nesw-resize",r:"ew-resize",br:"nwse-resize",b:"ns-resize",bl:"nesw-resize",l:"ew-resize",tl:"nwse-resize"},B={props:{name:{type:String,default:null},value:{type:Boolean,default:!1},ssr:{type:Boolean,default:!0},classes:L,overlayClass:L,contentClass:L,styles:A,overlayStyle:A,contentStyle:A,lockScroll:{type:Boolean,default:!0},hideOverlay:{type:Boolean,default:!1},clickToClose:{type:Boolean,default:!0},escToClose:{type:Boolean,default:!1},preventClick:{type:Boolean,default:!1},attach:{type:null,default:!1,validator:function(t){var n=e(t);return"boolean"===n||"string"===n||t.nodeType===Node.ELEMENT_NODE}},transition:{type:[String,Object],default:"vfm"},overlayTransition:{type:[String,Object],default:"vfm"},zIndexAuto:{type:Boolean,default:!0},zIndexBase:{type:[String,Number],default:1e3},zIndex:{type:[Boolean,String,Number],default:!1},focusRetain:{type:Boolean,default:!0},focusTrap:{type:Boolean,default:!1},fitParent:{type:Boolean,default:!0},drag:{type:Boolean,default:!1},dragSelector:{type:String,default:""},keepChangedStyle:{type:Boolean,default:!1},resize:{type:Boolean,default:!1},resizeDirections:{type:Array,default:function(){return["t","tr","r","br","b","bl","l","tl"]},validator:function(e){return["t","tr","r","br","b","bl","l","tl"].filter((function(t){return-1!==e.indexOf(t)})).length===e.length}},minWidth:{type:Number,default:0},minHeight:{type:Number,default:0},maxWidth:{type:Number,default:1/0},maxHeight:{type:Number,default:1/0}},data:function(){return{modalStackIndex:null,visible:!1,visibility:{modal:!1,overlay:!1,resize:!1},overlayTransitionState:null,modalTransitionState:null,stopEvent:!1,params:{},dragResizeStyle:{},resolveToggle:_,rejectToggle:_,state:null,lastMousedownEl:null}},computed:{api:function(){return this[this.$_options.key]},isComponentReadyToBeDestroyed:function(){return(this.hideOverlay||this.overlayTransitionState===R)&&this.modalTransitionState===R},calculateZIndex:function(){return!1===this.zIndex?!!this.zIndexAuto&&+this.zIndexBase+2*(this.modalStackIndex||0):this.zIndex},bindStyle:function(){return o({},!1!==this.calculateZIndex&&{zIndex:this.calculateZIndex})},bindContentStyle:function(){var e=[this.dragResizeStyle];return Array.isArray(this.contentStyle)?e.push.apply(e,r(this.contentStyle)):e.push(this.contentStyle),e},computedTransition:function(){return"string"==typeof this.transition?{name:this.transition}:o({},this.transition)},computedOverlayTransition:function(){return"string"==typeof this.overlayTransition?{name:this.overlayTransition}:o({},this.overlayTransition)}},watch:{value:function(e){if(this.stopEvent)this.stopEvent=!1;else if(this.mounted(),!e){if(this.emitEvent("before-close",!0))return void this.rejectToggle("hide");this.close()}},lockScroll:"handleLockScroll",hideOverlay:function(e){this.value&&!e&&(this.visibility.overlay=!0)},attach:"mounted",isComponentReadyToBeDestroyed:function(e){e&&(this.visible=!1)},drag:function(e){this.visible&&(e?this.addDragDown():this.removeDragDown())},resize:function(e){this.visible&&(e?this.addResizeDown():this.removeResizeDown())},keepChangedStyle:function(e){e||(this.dragResizeStyle={})}},created:function(){this.api.modals.push(this)},mounted:function(){this.$focusTrap=new c,this.mounted()},beforeDestroy:function(){var e,t=this;this.close(),this.lockScroll&&this.$refs.vfmContainer&&M(this.$refs.vfmContainer),null==this||null===(e=this.$el)||void 0===e||e.remove();var n=this.api.modals.findIndex((function(e){return e===t}));this.api.modals.splice(n,1)},methods:{mounted:function(){var e=this;if(this.value){if(this.emitEvent("before-open",!1))return void this.rejectToggle("show");var t=this.getAttachElement();if(t||!1===this.attach){!1!==this.attach&&t.appendChild(this.$el);var n=this.api.openedModals.findIndex((function(t){return t===e}));-1!==n&&this.api.openedModals.splice(n,1),this.api.openedModals.push(this),this.modalStackIndex=this.api.openedModals.length-1,this.handleLockScroll(),this.api.openedModals.filter((function(t){return t!==e})).forEach((function(e,n){e.getAttachElement()===t&&(e.modalStackIndex=n,e.visibility.overlay=!1)})),this.visible=!0,this.$nextTick((function(){e.startTransitionEnter()}))}else!1!==t&&console.warn("Unable to locate target ".concat(this.attach))}},close:function(){var e=this,t=this.api.openedModals.findIndex((function(t){return t===e}));if(-1!==t&&this.api.openedModals.splice(t,1),this.api.openedModals.length>0){var n=this.api.openedModals[this.api.openedModals.length-1];(n.focusRetain||n.focusTrap)&&n.$refs.vfmContainer.focus(),!n.hideOverlay&&(n.visibility.overlay=!0)}this.drag&&this.removeDragDown(),this.resize&&this.removeResizeDown(),this.state=null,this.startTransitionLeave()},startTransitionEnter:function(){this.visibility.overlay=!0,this.visibility.modal=!0},startTransitionLeave:function(){this.visibility.overlay=!1,this.visibility.modal=!1},handleLockScroll:function(){var e=this;this.value&&this.$nextTick((function(){e.lockScroll?k(e.$refs.vfmContainer,{reserveScrollBarGap:!0}):M(e.$refs.vfmContainer)}))},getAttachElement:function(){return!1!==this.attach&&("string"==typeof this.attach?!!window&&window.document.querySelector(this.attach):this.attach)},beforeOverlayEnter:function(){this.overlayTransitionState=D},afterOverlayEnter:function(){this.overlayTransitionState=$},beforeOverlayLeave:function(){this.overlayTransitionState=j},afterOverlayLeave:function(){this.overlayTransitionState=R},beforeModalEnter:function(){this.modalTransitionState=D},afterModalEnter:function(){this.modalTransitionState=$,(this.focusRetain||this.focusTrap)&&this.$refs.vfmContainer.focus(),this.focusTrap&&this.$focusTrap.enable(this.$refs.vfmContainer),this.drag&&this.addDragDown(),this.resize&&this.addResizeDown(),this.$emit("opened",this.createModalEvent({type:"opened"})),this.resolveToggle("show")},beforeModalLeave:function(){this.modalTransitionState=j,this.$focusTrap.enabled()&&this.$focusTrap.disable()},afterModalLeave:function(){this.modalTransitionState=R,this.modalStackIndex=null,this.lockScroll&&M(this.$refs.vfmContainer),this.keepChangedStyle||(this.dragResizeStyle={});var e=!1,t=this.createModalEvent({type:"closed",stop:function(){e=!0}});this.$emit("closed",t),this.resolveToggle("hide"),e||(this.params={})},onMousedown:function(e){this.lastMousedownEl=null==e?void 0:e.target},onMouseupContainer:function(){this.lastMousedownEl===this.$refs.vfmContainer&&"resize:move"!==this.state&&(this.$emit("click-outside",this.createModalEvent({type:"click-outside"})),this.clickToClose&&this.$emit("input",!1))},onEsc:function(){this.visible&&this.escToClose&&this.$emit("input",!1)},createModalEvent:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return o({ref:this},e)},emitEvent:function(e,t){var n=!1,i=this.createModalEvent({type:e,stop:function(){n=!0}});return this.$emit(e,i),!!n&&(this.stopEvent=!0,this.$emit("input",t),!0)},emitState:function(e,t,n){this.state="".concat(t,":").concat(n),this.$emit(this.state,e)},toggle:function(e,t){var n=arguments,i=this;return new Promise((function(o,r){i.resolveToggle=function(e){o(e),i.resolveToggle=_},i.rejectToggle=function(e){r(e),i.rejectToggle=_};var a="boolean"==typeof e?e:!i.value;a&&2===n.length&&(i.params=t),i.$emit("input",a)}))},pointerDown:function(e){var t=this;e.stopPropagation();var n,i="resize",a="drag",s=this.$refs,l=s.vfmContainer,c=s.vfmContent,v=e.target.getAttribute("direction");if(v)n=i;else{if(!function(e,t,n){return""===n||r(t.querySelectorAll(n)).includes(e.target)}(e,c,this.dragSelector))return;n=a}this.emitState(e,n,"start");var p,y,g,b,w=u(e),x=l.getBoundingClientRect(),S=c.getBoundingClientRect(),E="absolute"===window.getComputedStyle(c).position,T=f(this.dragResizeStyle.top),z=f(this.dragResizeStyle.left),C=function(){if(t.fitParent){var e={absolute:function(){return{minTop:0,minLeft:0,maxTop:x.height-S.height,maxLeft:x.width-S.width}},relative:function(){return{minTop:T+x.top-S.top,minLeft:z+x.left-S.left,maxTop:T+x.bottom-S.bottom,maxLeft:z+x.right-S.right}}};return E?e.absolute():e.relative()}return{}}(),O=n===i&&(p=document.body,y="cursor",g=N[v],b=p.style[y],p.style[y]=g,function(){p.style[y]=b}),k=function(e){e.stopPropagation(),t.emitState(e,n,"move");var r,s,l=u(e),c={x:l.x-w.x,y:l.y-w.y};n===i&&(c=t.getResizeOffset(v,c,x,S,E)),E?(r=S.top-x.top+c.y,s=S.left-x.left+c.x):(r=T+c.y,s=z+c.x),n===a&&t.fitParent&&(r=d(C.minTop,r,C.maxTop),s=d(C.minLeft,s,C.maxLeft));var f=o(o(o({position:"relative",top:r+"px",left:s+"px",margin:"unset",touchAction:"none"},E&&{position:"absolute",transform:"unset",width:S.width+"px",height:S.height+"px"}),c.width&&{width:c.width+"px"}),c.height&&{height:c.height+"px"});t.dragResizeStyle=o(o({},t.dragResizeStyle),f)};h("move",document,k),h("up",document,(function e(o){o.stopPropagation(),n===i&&O&&O(),setTimeout((function(){t.emitState(o,n,"end")})),m("move",document,k),m("up",document,e)}))},addDragDown:function(){h("down",this.$refs.vfmContent,this.pointerDown),this.dragResizeStyle.touchAction="none"},removeDragDown:function(){m("down",this.$refs.vfmContent,this.pointerDown)},addResizeDown:function(){var e=this;this.visibility.resize=!0,this.$nextTick((function(){h("down",e.$refs.vfmResize,e.pointerDown)}))},removeResizeDown:function(){m("down",this.$refs.vfmResize,this.pointerDown),this.visibility.resize=!1},getResizeOffset:function(e,t,i,a,s){var l=this,c=function(e,t,n,o){var r,s=a[t],c=i[e]-a[e],u=(r=t).charAt(0).toUpperCase()+r.slice(1);return{axis:n,edgeName:t,min:o?c:-s,max:o?s:c,minEdge:l["min".concat(u)],maxEdge:l["max".concat(u)],getEdge:function(e){return a[t]-e*(o?1:-1)},getOffsetAxis:function(e,n){var i=a[t]-e;return n?o?i:0:(o?1:-1)*i/2}}},u={t:["top","height","y",!0],b:["bottom","height","y",!1],l:["left","width","x",!0],r:["right","width","x",!1]},f={x:0,y:0};return e.split("").forEach((function(e){var i=c.apply(void 0,r(u[e]));f=o(o({},f),function(e){var i,o=t[e.axis];o=l.fitParent?d(e.min,o,e.max):o;var r=d(e.minEdge,e.getEdge(o),e.maxEdge);return o=e.getOffsetAxis(r,s),n(i={},e.edgeName,r),n(i,e.axis,o),i}(i))})),f}}};var P,I=function(e,t,n,i,o,r,a,s,l,c){"boolean"!=typeof a&&(l=s,s=a,a=!1);var u,d="function"==typeof n?n.options:n;if(e&&e.render&&(d.render=e.render,d.staticRenderFns=e.staticRenderFns,d._compiled=!0,o&&(d.functional=!0)),i&&(d._scopeId=i),r?(u=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),t&&t.call(this,l(e)),e&&e._registeredComponents&&e._registeredComponents.add(r)},d._ssrRegister=u):t&&(u=a?function(e){t.call(this,c(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,s(e))}),u)if(d.functional){var f=d.render;d.render=function(e,t){return u.call(t),f(e,t)}}else{var v=d.beforeCreate;d.beforeCreate=v?[].concat(v,u):[u]}return n},H="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());var U={};var F=I({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return e.ssr||e.visible?n("div",{directives:[{name:"show",rawName:"v-show",value:!e.ssr||e.visible,expression:"!ssr || visible"}],staticClass:"vfm vfm--inset",class:[!1===e.attach?"vfm--fixed":"vfm--absolute",{"vfm--prevent-none":e.preventClick}],style:e.bindStyle,on:{keydown:function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"esc",27,t.key,["Esc","Escape"])?null:e.onEsc(t)}}},[n("transition",e._b({ref:"vfmOverlayTransition",on:{"before-enter":e.beforeOverlayEnter,"after-enter":e.afterOverlayEnter,"before-leave":e.beforeOverlayLeave,"after-leave":e.afterOverlayLeave}},"transition",e.computedOverlayTransition,!1),[n("div",{directives:[{name:"show",rawName:"v-show",value:!e.hideOverlay&&e.visibility.overlay,expression:"!hideOverlay && visibility.overlay"}],staticClass:"vfm__overlay vfm--overlay vfm--absolute vfm--inset",class:e.overlayClass,style:e.overlayStyle})]),e._v(" "),n("transition",e._b({ref:"vfmTransition",on:{"before-enter":e.beforeModalEnter,"after-enter":e.afterModalEnter,"before-leave":e.beforeModalLeave,"after-leave":e.afterModalLeave}},"transition",e.computedTransition,!1),[n("div",{directives:[{name:"show",rawName:"v-show",value:e.visibility.modal,expression:"visibility.modal"}],ref:"vfmContainer",staticClass:"vfm__container vfm--absolute vfm--inset vfm--outline-none",class:e.classes,style:e.styles,attrs:{"aria-expanded":e.visibility.modal.toString(),role:"dialog","aria-modal":"true",tabindex:"-1"},on:{mouseup:function(t){return t.target!==t.currentTarget?null:e.onMouseupContainer(t)},mousedown:function(t){return t.target!==t.currentTarget?null:e.onMousedown(t)}}},[n("div",{ref:"vfmContent",staticClass:"vfm__content",class:[e.contentClass,{"vfm--prevent-auto":e.preventClick}],style:e.bindContentStyle,on:{mousedown:function(t){return e.onMousedown(null)}}},[e._t("default",null,{params:e.params,close:function(){return e.$emit("input",!1)}}),e._v(" "),e.visibility.resize&&e.visibility.modal?n("div",{ref:"vfmResize",staticClass:"vfm__resize vfm--absolute vfm--inset vfm--prevent-none vfm--select-none vfm--touch-none"},e._l(e.resizeDirections,(function(e){return n("div",{key:e,staticClass:"vfm--absolute vfm--prevent-auto",class:"vfm--resize-"+e,attrs:{direction:e}})})),0):e._e()],2)])])],1):e._e()},staticRenderFns:[]},(function(e){e&&e("data-v-8fe8c8ee_0",{source:".vfm--fixed[data-v-8fe8c8ee]{position:fixed}.vfm--absolute[data-v-8fe8c8ee]{position:absolute}.vfm--inset[data-v-8fe8c8ee]{top:0;right:0;bottom:0;left:0}.vfm--overlay[data-v-8fe8c8ee]{background-color:rgba(0,0,0,.5)}.vfm--prevent-none[data-v-8fe8c8ee]{pointer-events:none}.vfm--prevent-auto[data-v-8fe8c8ee]{pointer-events:auto}.vfm--outline-none[data-v-8fe8c8ee]:focus{outline:0}.vfm-enter-active[data-v-8fe8c8ee],.vfm-leave-active[data-v-8fe8c8ee]{transition:opacity .2s}.vfm-enter[data-v-8fe8c8ee],.vfm-leave-to[data-v-8fe8c8ee]{opacity:0}.vfm--touch-none[data-v-8fe8c8ee]{touch-action:none}.vfm--select-none[data-v-8fe8c8ee]{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vfm--resize-bl[data-v-8fe8c8ee],.vfm--resize-br[data-v-8fe8c8ee],.vfm--resize-tl[data-v-8fe8c8ee],.vfm--resize-tr[data-v-8fe8c8ee]{width:12px;height:12px;z-index:10}.vfm--resize-t[data-v-8fe8c8ee]{top:-6px;left:0;width:100%;height:12px;cursor:ns-resize}.vfm--resize-tr[data-v-8fe8c8ee]{top:-6px;right:-6px;cursor:nesw-resize}.vfm--resize-r[data-v-8fe8c8ee]{top:0;right:-6px;width:12px;height:100%;cursor:ew-resize}.vfm--resize-br[data-v-8fe8c8ee]{bottom:-6px;right:-6px;cursor:nwse-resize}.vfm--resize-b[data-v-8fe8c8ee]{bottom:-6px;left:0;width:100%;height:12px;cursor:ns-resize}.vfm--resize-bl[data-v-8fe8c8ee]{bottom:-6px;left:-6px;cursor:nesw-resize}.vfm--resize-l[data-v-8fe8c8ee]{top:0;left:-6px;width:12px;height:100%;cursor:ew-resize}.vfm--resize-tl[data-v-8fe8c8ee]{top:-6px;left:-6px;cursor:nwse-resize}",map:void 0,media:void 0})}),B,"data-v-8fe8c8ee",false,undefined,!1,(function(e){return function(e,t){return function(e,t){var n=H?t.media||"default":e,i=U[n]||(U[n]={ids:new Set,styles:[]});if(!i.ids.has(e)){i.ids.add(e);var o=t.source;if(t.map&&(o+="\n/*# sourceURL="+t.map.sources[0]+" */",o+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(t.map))))+" */"),i.element||(i.element=document.createElement("style"),i.element.type="text/css",t.media&&i.element.setAttribute("media",t.media),void 0===P&&(P=document.head||document.getElementsByTagName("head")[0]),P.appendChild(i.element)),"styleSheet"in i.element)i.styles.push(o),i.element.styleSheet.cssText=i.styles.filter(Boolean).join("\n");else{var r=i.ids.size-1,a=document.createTextNode(o),s=i.element.childNodes;s[r]&&i.element.removeChild(s[r]),s.length?i.element.insertBefore(a,s[r]):i.element.appendChild(a)}}}(e,t)}}),void 0,void 0),V=I({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"modals-container"},e._l(e.api.dynamicModals,(function(t,i){return n(t.component,e._g(e._b({key:t.id,tag:"component",on:{closed:function(t){return e.slice(i)},"before-open":function(n){return e.beforeOpen(n,t,i)},opened:t.opened},scopedSlots:e._u([e._l(t.slots,(function(t,i){return{key:i,fn:function(){return[e.isString(t)?n("div",{key:i,domProps:{innerHTML:e._s(t)}}):n(t.component,e._g(e._b({key:i,tag:"component"},"component",t.bind,!1),t.on))]},proxy:!0}}))],null,!0),model:{value:t.value,callback:function(n){e.$set(t,"value",n)},expression:"modal.value"}},"component",t.bind,!1),t.on))})),1)},staticRenderFns:[]},undefined,{props:{},computed:{api:function(){return this[this.$_options.key]}},methods:{slice:function(e){this.api.dynamicModals.splice(e,1)},beforeOpen:function(e,t,n){var i=this;e.ref.params=t.params,this.$nextTick((function(){t.value||(i.slice(n),t.reject("show"))}))},isString:function(e){return"string"==typeof e}}},undefined,false,undefined,!1,void 0,void 0,void 0);function K(e,t){var n=o({},e);return Object.assign(n.props,{$_options:{type:Object,default:function(){return t}}}),n}function W(t,n){var i=function(t,n){var i;return function(){return i={show:function(t){for(var i=this,o=arguments.length,r=new Array(o>1?o-1:0),a=1;a<o;a++)r[a-1]=arguments[a];switch(e(t)){case"string":return this.toggle.apply(this,[t,!0].concat(r));case"object":return Promise.allSettled([new Promise((function(e,o){var a={value:!0,id:Symbol("dynamicModal"),component:n.componentName,bind:{},slots:{},on:{},params:r[0],reject:o,opened:function(){e("show")}};i.dynamicModals.push(Object.assign(a,t))}))])}},hide:function(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];return this.toggle(t,!1)},hideAll:function(){return this.hide.apply(this,r(this.openedModals.map((function(e){return e.name}))))},toggle:function(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),i=1;i<t;i++)n[i-1]=arguments[i];var o=Array.isArray(e)?this.get.apply(this,r(e)):this.get(e);return Promise.allSettled(o.map((function(e){return e.toggle.apply(e,n)})))},get:function(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];return this.modals.filter((function(e){return t.includes(e.name)}))},dynamicModals:[],openedModals:[],modals:[]},t.observable(i)}}(t,n)();Object.defineProperty(t.prototype,n.key,{get:function(){return i}})}var Y={componentName:"VueFinalModal",dynamicContainerName:"ModalsContainer",key:"$vfm"};return function(e){return{install:function(t,n){var i=Object.assign({},Y,e,n);(function(e,t,n){return!(e||t||n)||("undefined"==typeof window||(e&&console.error("[vue-final-modal] Duplicate registration API key of VueFinalModal."),t&&console.error("[vue-final-modal] Duplicate registration componentName of VueFinalModal."),n&&console.error("[vue-final-modal] Duplicate registration dynamicContainerName of ModalsContainer.")),!1)})(t.prototype[i.key],t.options.components[i.componentName],t.options.components[i.dynamicContainerName])&&(W(t,i),function(e,t){e.component(t.componentName,K(F,t))}(t,i),function(e,t){e.component(t.dynamicContainerName,K(V,t))}(t,i))}}}}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue")):"function"==typeof define&&define.amd?define(["exports","vue"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).VueFinalModal={},e.Vue)}(this,(function(e,t){"use strict";function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=n(t);function o(e){return(o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function r(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function s(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);t&&(i=i.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,i)}return n}function l(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?s(Object(n),!0).forEach((function(t){a(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):s(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function c(e){return function(e){if(Array.isArray(e))return u(e)}(e)||function(e){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e))return Array.from(e)}(e)||function(e,t){if(!e)return;if("string"==typeof e)return u(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return u(e,t)}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function u(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,i=new Array(t);n<t;n++)i[n]=e[n];return i}var d=function(e){return function(e,t){return c(e.querySelectorAll(t)||[])}(e,'button:not([disabled]), select:not([disabled]), a[href]:not([disabled]), area[href]:not([disabled]), [contentEditable=""]:not([disabled]), [contentEditable="true"]:not([disabled]), [contentEditable="TRUE"]:not([disabled]), textarea:not([disabled]), iframe:not([disabled]), input:not([disabled]), summary:not([disabled]), [tabindex]:not([tabindex="-1"])')},f=function(e){return e==document.activeElement},v=function(){function e(){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.root=null,this.elements=[],this.onKeyDown=this.onKeyDown.bind(this),this.enable=this.enable.bind(this),this.disable=this.disable.bind(this),this.firstElement=this.firstElement.bind(this),this.lastElement=this.lastElement.bind(this)}var t,n,i;return t=e,(n=[{key:"lastElement",value:function(){return this.elements[this.elements.length-1]||null}},{key:"firstElement",value:function(){return this.elements[0]||null}},{key:"onKeyDown",value:function(e){if(function(e){return"Tab"===e.key||9===e.keyCode}(e)){if(!e.shiftKey)return!document.activeElement||f(this.lastElement())?(this.firstElement().focus(),void e.preventDefault()):void 0;f(this.firstElement())&&(this.lastElement().focus(),e.preventDefault())}}},{key:"enabled",value:function(){return!!this.root}},{key:"enable",value:function(e){e&&(this.root=e,this.elements=d(this.root),this.root.addEventListener("keydown",this.onKeyDown))}},{key:"disable",value:function(){this.root.removeEventListener("keydown",this.onKeyDown),this.root=null}}])&&r(t.prototype,n),i&&r(t,i),e}(),h=function(e){var t=e.targetTouches?e.targetTouches[0]:e;return{x:t.clientX,y:t.clientY}},m=function(e,t,n){return"number"!=typeof e&&(e=Math.min(t,n)||t),"number"!=typeof n&&(n=Math.max(t,e)),Math.min(Math.max(t,e),n)},p=function(e){return e&&Number(e.replace(/px$/,""))||0},y={down:{pc:"mousedown",m:"touchstart"},move:{pc:"mousemove",m:"touchmove"},up:{pc:"mouseup",m:"touchend"}},b=function(e,t,n){t&&t.addEventListener(y[e].pc,n),t&&t.addEventListener(y[e].m,n,{passive:!1})},g=function(e,t,n){t&&t.removeEventListener(y[e].pc,n),t&&t.removeEventListener(y[e].m,n)},w=!1;if("undefined"!=typeof window){var x={get passive(){w=!0}};window.addEventListener("testPassive",null,x),window.removeEventListener("testPassive",null,x)}var S,E,T="undefined"!=typeof window&&window.navigator&&window.navigator.platform&&(/iP(ad|hone|od)/.test(window.navigator.platform)||"MacIntel"===window.navigator.platform&&window.navigator.maxTouchPoints>1),z=[],C=!1,O=0,M=-1,_=function(e,t){var n=!1;return function(e){for(var t=[];e;){if(t.push(e),e.classList.contains("vfm"))return t;e=e.parentElement}return t}(e).forEach((function(e){(function(e){if(!e||e.nodeType!==Node.ELEMENT_NODE)return!1;var t=window.getComputedStyle(e);return["auto","scroll"].includes(t.overflowY)&&e.scrollHeight>e.clientHeight})(e)&&function(e,t){return!(0===e.scrollTop&&t<0||e.scrollTop+e.clientHeight+t>=e.scrollHeight&&t>0)}(e,t)&&(n=!0)})),n},k=function(e){return z.some((function(){return _(e,-O)}))},D=function(e){var t=e||window.event;return!!k(t.target)||(t.touches.length>1||(t.preventDefault&&t.preventDefault(),!1))},$=function(e,t){if(e){if(!z.some((function(t){return t.targetElement===e}))){var n={targetElement:e,options:t||{}};z=[].concat(c(z),[n]),T?(e.ontouchstart=function(e){1===e.targetTouches.length&&(M=e.targetTouches[0].clientY)},e.ontouchmove=function(t){1===t.targetTouches.length&&function(e,t){O=e.targetTouches[0].clientY-M,!k(e.target)&&(t&&0===t.scrollTop&&O>0||function(e){return!!e&&e.scrollHeight-e.scrollTop<=e.clientHeight}(t)&&O<0?D(e):e.stopPropagation())}(t,e)},C||(document.addEventListener("touchmove",D,w?{passive:!1}:void 0),C=!0)):function(e){if(void 0===E){var t=!!e&&!0===e.reserveScrollBarGap,n=window.innerWidth-document.documentElement.clientWidth;if(t&&n>0){var i=parseInt(getComputedStyle(document.body).getPropertyValue("padding-right"),10);E=document.body.style.paddingRight,document.body.style.paddingRight="".concat(i+n,"px")}}void 0===S&&(S=document.body.style.overflow,document.body.style.overflow="hidden")}(t)}}else console.error("disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.")},R=function(e){e?(z=z.filter((function(t){return t.targetElement!==e})),T?(e.ontouchstart=null,e.ontouchmove=null,C&&0===z.length&&(document.removeEventListener("touchmove",D,w?{passive:!1}:void 0),C=!1)):z.length||(void 0!==E&&(document.body.style.paddingRight=E,E=void 0),void 0!==S&&(document.body.style.overflow=S,S=void 0))):console.error("enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices.")},j=function(){},L="enter",A="entering",B="leave",P="leavng";var I={type:[String,Object,Array],default:""},N={type:[Object,Array],default:function(){return{}}},V={t:"ns-resize",tr:"nesw-resize",r:"ew-resize",br:"nwse-resize",b:"ns-resize",bl:"nesw-resize",l:"ew-resize",tl:"nwse-resize"},H={props:{name:{type:String,default:null},value:{type:Boolean,default:!1},ssr:{type:Boolean,default:!0},classes:I,overlayClass:I,contentClass:I,styles:N,overlayStyle:N,contentStyle:N,lockScroll:{type:Boolean,default:!0},hideOverlay:{type:Boolean,default:!1},clickToClose:{type:Boolean,default:!0},escToClose:{type:Boolean,default:!1},preventClick:{type:Boolean,default:!1},attach:{type:null,default:!1,validator:function(e){var t=o(e);return"boolean"===t||"string"===t||e.nodeType===Node.ELEMENT_NODE}},transition:{type:[String,Object],default:"vfm"},overlayTransition:{type:[String,Object],default:"vfm"},zIndexAuto:{type:Boolean,default:!0},zIndexBase:{type:[String,Number],default:1e3},zIndex:{type:[Boolean,String,Number],default:!1},focusRetain:{type:Boolean,default:!0},focusTrap:{type:Boolean,default:!1},fitParent:{type:Boolean,default:!0},drag:{type:Boolean,default:!1},dragSelector:{type:String,default:""},keepChangedStyle:{type:Boolean,default:!1},resize:{type:Boolean,default:!1},resizeDirections:{type:Array,default:function(){return["t","tr","r","br","b","bl","l","tl"]},validator:function(e){return["t","tr","r","br","b","bl","l","tl"].filter((function(t){return-1!==e.indexOf(t)})).length===e.length}},minWidth:{type:Number,default:0},minHeight:{type:Number,default:0},maxWidth:{type:Number,default:1/0},maxHeight:{type:Number,default:1/0}},data:function(){return{modalStackIndex:null,visible:!1,visibility:{modal:!1,overlay:!1,resize:!1},overlayTransitionState:null,modalTransitionState:null,stopEvent:!1,params:{},dragResizeStyle:{},resolveToggle:j,rejectToggle:j,state:null,lastMousedownEl:null}},computed:{isComponentReadyToBeDestroyed:function(){return(this.hideOverlay||this.overlayTransitionState===B)&&this.modalTransitionState===B},calculateZIndex:function(){return!1===this.zIndex?!!this.zIndexAuto&&+this.zIndexBase+2*(this.modalStackIndex||0):this.zIndex},bindStyle:function(){return l({},!1!==this.calculateZIndex&&{zIndex:this.calculateZIndex})},bindContentStyle:function(){var e=[this.dragResizeStyle];return Array.isArray(this.contentStyle)?e.push.apply(e,c(this.contentStyle)):e.push(this.contentStyle),e},computedTransition:function(){return"string"==typeof this.transition?{name:this.transition}:l({},this.transition)},computedOverlayTransition:function(){return"string"==typeof this.overlayTransition?{name:this.overlayTransition}:l({},this.overlayTransition)}},watch:{value:function(e){if(this.stopEvent)this.stopEvent=!1;else if(this.mounted(),!e){if(this.emitEvent("before-close",!0))return void this.rejectToggle("hide");this.close()}},lockScroll:"handleLockScroll",hideOverlay:function(e){this.value&&!e&&(this.visibility.overlay=!0)},attach:"mounted",isComponentReadyToBeDestroyed:function(e){e&&(this.visible=!1)},drag:function(e){this.visible&&(e?this.addDragDown():this.removeDragDown())},resize:function(e){this.visible&&(e?this.addResizeDown():this.removeResizeDown())},keepChangedStyle:function(e){e||(this.dragResizeStyle={})}},created:function(){this.api.modals.push(this)},mounted:function(){this.$focusTrap=new v,this.mounted()},beforeDestroy:function(){var e,t=this;this.close(),this.lockScroll&&this.$refs.vfmContainer&&R(this.$refs.vfmContainer),null==this||null===(e=this.$el)||void 0===e||e.remove();var n=this.api.modals.findIndex((function(e){return e===t}));this.api.modals.splice(n,1)},methods:{mounted:function(){var e=this;if(this.value){if(this.emitEvent("before-open",!1))return void this.rejectToggle("show");var t=this.getAttachElement();if(t||!1===this.attach){!1!==this.attach&&t.appendChild(this.$el);var n=this.api.openedModals.findIndex((function(t){return t===e}));-1!==n&&this.api.openedModals.splice(n,1),this.api.openedModals.push(this),this.modalStackIndex=this.api.openedModals.length-1,this.handleLockScroll(),this.api.openedModals.filter((function(t){return t!==e})).forEach((function(e,n){e.getAttachElement()===t&&(e.modalStackIndex=n,e.visibility.overlay=!1)})),this.visible=!0,this.$nextTick((function(){e.startTransitionEnter()}))}else!1!==t&&console.warn("Unable to locate target ".concat(this.attach))}},close:function(){var e=this,t=this.api.openedModals.findIndex((function(t){return t===e}));if(-1!==t&&this.api.openedModals.splice(t,1),this.api.openedModals.length>0){var n=this.api.openedModals[this.api.openedModals.length-1];(n.focusRetain||n.focusTrap)&&n.$refs.vfmContainer.focus(),!n.hideOverlay&&(n.visibility.overlay=!0)}this.drag&&this.removeDragDown(),this.resize&&this.removeResizeDown(),this.state=null,this.startTransitionLeave()},startTransitionEnter:function(){this.visibility.overlay=!0,this.visibility.modal=!0},startTransitionLeave:function(){this.visibility.overlay=!1,this.visibility.modal=!1},handleLockScroll:function(){var e=this;this.value&&this.$nextTick((function(){e.lockScroll?$(e.$refs.vfmContainer,{reserveScrollBarGap:!0}):R(e.$refs.vfmContainer)}))},getAttachElement:function(){return!1!==this.attach&&("string"==typeof this.attach?!!window&&window.document.querySelector(this.attach):this.attach)},beforeOverlayEnter:function(){this.overlayTransitionState=A},afterOverlayEnter:function(){this.overlayTransitionState=L},beforeOverlayLeave:function(){this.overlayTransitionState=P},afterOverlayLeave:function(){this.overlayTransitionState=B},beforeModalEnter:function(){this.modalTransitionState=A},afterModalEnter:function(){this.modalTransitionState=L,(this.focusRetain||this.focusTrap)&&this.$refs.vfmContainer.focus(),this.focusTrap&&this.$focusTrap.enable(this.$refs.vfmContainer),this.drag&&this.addDragDown(),this.resize&&this.addResizeDown(),this.$emit("opened",this.createModalEvent({type:"opened"})),this.resolveToggle("show")},beforeModalLeave:function(){this.modalTransitionState=P,this.$focusTrap.enabled()&&this.$focusTrap.disable()},afterModalLeave:function(){this.modalTransitionState=B,this.modalStackIndex=null,this.lockScroll&&R(this.$refs.vfmContainer),this.keepChangedStyle||(this.dragResizeStyle={});var e=!1,t=this.createModalEvent({type:"closed",stop:function(){e=!0}});this.$emit("closed",t),this.resolveToggle("hide"),e||(this.params={})},onMousedown:function(e){this.lastMousedownEl=null==e?void 0:e.target},onMouseupContainer:function(){this.lastMousedownEl===this.$refs.vfmContainer&&"resize:move"!==this.state&&(this.$emit("click-outside",this.createModalEvent({type:"click-outside"})),this.clickToClose&&this.$emit("input",!1))},onEsc:function(){this.visible&&this.escToClose&&this.$emit("input",!1)},createModalEvent:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return l({ref:this},e)},emitEvent:function(e,t){var n=!1,i=this.createModalEvent({type:e,stop:function(){n=!0}});return this.$emit(e,i),!!n&&(this.stopEvent=!0,this.$emit("input",t),!0)},emitState:function(e,t,n){this.state="".concat(t,":").concat(n),this.$emit(this.state,e)},toggle:function(e,t){var n=arguments,i=this;return new Promise((function(o,r){i.resolveToggle=function(e){o(e),i.resolveToggle=j},i.rejectToggle=function(e){r(e),i.rejectToggle=j};var a="boolean"==typeof e?e:!i.value;a&&2===n.length&&(i.params=t),i.$emit("input",a)}))},pointerDown:function(e){var t=this;e.stopPropagation();var n,i="resize",o="drag",r=this.$refs,a=r.vfmContainer,s=r.vfmContent,u=e.target.getAttribute("direction");if(u)n=i;else{if(!function(e,t,n){return""===n||c(t.querySelectorAll(n)).includes(e.target)}(e,s,this.dragSelector))return;n=o}this.emitState(e,n,"start");var d,f,v,y,w=h(e),x=a.getBoundingClientRect(),S=s.getBoundingClientRect(),E="absolute"===window.getComputedStyle(s).position,T=p(this.dragResizeStyle.top),z=p(this.dragResizeStyle.left),C=function(){if(t.fitParent){var e={absolute:function(){return{minTop:0,minLeft:0,maxTop:x.height-S.height,maxLeft:x.width-S.width}},relative:function(){return{minTop:T+x.top-S.top,minLeft:z+x.left-S.left,maxTop:T+x.bottom-S.bottom,maxLeft:z+x.right-S.right}}};return E?e.absolute():e.relative()}return{}}(),O=n===i&&(d=document.body,f="cursor",v=V[u],y=d.style[f],d.style[f]=v,function(){d.style[f]=y}),M=function(e){e.stopPropagation(),t.emitState(e,n,"move");var r,a,s=h(e),c={x:s.x-w.x,y:s.y-w.y};n===i&&(c=t.getResizeOffset(u,c,x,S,E)),E?(r=S.top-x.top+c.y,a=S.left-x.left+c.x):(r=T+c.y,a=z+c.x),n===o&&t.fitParent&&(r=m(C.minTop,r,C.maxTop),a=m(C.minLeft,a,C.maxLeft));var d=l(l(l({position:"relative",top:r+"px",left:a+"px",margin:"unset",touchAction:"none"},E&&{position:"absolute",transform:"unset",width:S.width+"px",height:S.height+"px"}),c.width&&{width:c.width+"px"}),c.height&&{height:c.height+"px"});t.dragResizeStyle=l(l({},t.dragResizeStyle),d)};b("move",document,M),b("up",document,(function e(o){o.stopPropagation(),n===i&&O&&O(),setTimeout((function(){t.emitState(o,n,"end")})),g("move",document,M),g("up",document,e)}))},addDragDown:function(){b("down",this.$refs.vfmContent,this.pointerDown),this.dragResizeStyle.touchAction="none"},removeDragDown:function(){g("down",this.$refs.vfmContent,this.pointerDown)},addResizeDown:function(){var e=this;this.visibility.resize=!0,this.$nextTick((function(){b("down",e.$refs.vfmResize,e.pointerDown)}))},removeResizeDown:function(){g("down",this.$refs.vfmResize,this.pointerDown),this.visibility.resize=!1},getResizeOffset:function(e,t,n,i,o){var r=this,s=function(e,t,o,a){var s,l=i[t],c=n[e]-i[e],u=(s=t).charAt(0).toUpperCase()+s.slice(1);return{axis:o,edgeName:t,min:a?c:-l,max:a?l:c,minEdge:r["min".concat(u)],maxEdge:r["max".concat(u)],getEdge:function(e){return i[t]-e*(a?1:-1)},getOffsetAxis:function(e,n){var o=i[t]-e;return n?a?o:0:(a?1:-1)*o/2}}},u={t:["top","height","y",!0],b:["bottom","height","y",!1],l:["left","width","x",!0],r:["right","width","x",!1]},d={x:0,y:0};return e.split("").forEach((function(e){var n=s.apply(void 0,c(u[e]));d=l(l({},d),function(e){var n,i=t[e.axis];i=r.fitParent?m(e.min,i,e.max):i;var s=m(e.minEdge,e.getEdge(i),e.maxEdge);return i=e.getOffsetAxis(s,o),a(n={},e.edgeName,s),a(n,e.axis,i),n}(n))})),d}}};var U,K=function(e,t,n,i,o,r,a,s,l,c){"boolean"!=typeof a&&(l=s,s=a,a=!1);var u,d="function"==typeof n?n.options:n;if(e&&e.render&&(d.render=e.render,d.staticRenderFns=e.staticRenderFns,d._compiled=!0,o&&(d.functional=!0)),i&&(d._scopeId=i),r?(u=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),t&&t.call(this,l(e)),e&&e._registeredComponents&&e._registeredComponents.add(r)},d._ssrRegister=u):t&&(u=a?function(e){t.call(this,c(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,s(e))}),u)if(d.functional){var f=d.render;d.render=function(e,t){return u.call(t),f(e,t)}}else{var v=d.beforeCreate;d.beforeCreate=v?[].concat(v,u):[u]}return n},F="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());var q={};var W=K({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return e.ssr||e.visible?n("div",{directives:[{name:"show",rawName:"v-show",value:!e.ssr||e.visible,expression:"!ssr || visible"}],staticClass:"vfm vfm--inset",class:[!1===e.attach?"vfm--fixed":"vfm--absolute",{"vfm--prevent-none":e.preventClick}],style:e.bindStyle,on:{keydown:function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"esc",27,t.key,["Esc","Escape"])?null:e.onEsc(t)}}},[n("transition",e._b({ref:"vfmOverlayTransition",on:{"before-enter":e.beforeOverlayEnter,"after-enter":e.afterOverlayEnter,"before-leave":e.beforeOverlayLeave,"after-leave":e.afterOverlayLeave}},"transition",e.computedOverlayTransition,!1),[n("div",{directives:[{name:"show",rawName:"v-show",value:!e.hideOverlay&&e.visibility.overlay,expression:"!hideOverlay && visibility.overlay"}],staticClass:"vfm__overlay vfm--overlay vfm--absolute vfm--inset",class:e.overlayClass,style:e.overlayStyle})]),e._v(" "),n("transition",e._b({ref:"vfmTransition",on:{"before-enter":e.beforeModalEnter,"after-enter":e.afterModalEnter,"before-leave":e.beforeModalLeave,"after-leave":e.afterModalLeave}},"transition",e.computedTransition,!1),[n("div",{directives:[{name:"show",rawName:"v-show",value:e.visibility.modal,expression:"visibility.modal"}],ref:"vfmContainer",staticClass:"vfm__container vfm--absolute vfm--inset vfm--outline-none",class:e.classes,style:e.styles,attrs:{"aria-expanded":e.visibility.modal.toString(),role:"dialog","aria-modal":"true",tabindex:"-1"},on:{mouseup:function(t){return t.target!==t.currentTarget?null:e.onMouseupContainer(t)},mousedown:function(t){return t.target!==t.currentTarget?null:e.onMousedown(t)}}},[n("div",{ref:"vfmContent",staticClass:"vfm__content",class:[e.contentClass,{"vfm--prevent-auto":e.preventClick}],style:e.bindContentStyle,on:{mousedown:function(t){return e.onMousedown(null)}}},[e._t("default",null,{params:e.params,close:function(){return e.$emit("input",!1)}}),e._v(" "),e.visibility.resize&&e.visibility.modal?n("div",{ref:"vfmResize",staticClass:"vfm__resize vfm--absolute vfm--inset vfm--prevent-none vfm--select-none vfm--touch-none"},e._l(e.resizeDirections,(function(e){return n("div",{key:e,staticClass:"vfm--absolute vfm--prevent-auto",class:"vfm--resize-"+e,attrs:{direction:e}})})),0):e._e()],2)])])],1):e._e()},staticRenderFns:[]},(function(e){e&&e("data-v-74b699c6_0",{source:".vfm--fixed[data-v-74b699c6]{position:fixed}.vfm--absolute[data-v-74b699c6]{position:absolute}.vfm--inset[data-v-74b699c6]{top:0;right:0;bottom:0;left:0}.vfm--overlay[data-v-74b699c6]{background-color:rgba(0,0,0,.5)}.vfm--prevent-none[data-v-74b699c6]{pointer-events:none}.vfm--prevent-auto[data-v-74b699c6]{pointer-events:auto}.vfm--outline-none[data-v-74b699c6]:focus{outline:0}.vfm-enter-active[data-v-74b699c6],.vfm-leave-active[data-v-74b699c6]{transition:opacity .2s}.vfm-enter[data-v-74b699c6],.vfm-leave-to[data-v-74b699c6]{opacity:0}.vfm--touch-none[data-v-74b699c6]{touch-action:none}.vfm--select-none[data-v-74b699c6]{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vfm--resize-bl[data-v-74b699c6],.vfm--resize-br[data-v-74b699c6],.vfm--resize-tl[data-v-74b699c6],.vfm--resize-tr[data-v-74b699c6]{width:12px;height:12px;z-index:10}.vfm--resize-t[data-v-74b699c6]{top:-6px;left:0;width:100%;height:12px;cursor:ns-resize}.vfm--resize-tr[data-v-74b699c6]{top:-6px;right:-6px;cursor:nesw-resize}.vfm--resize-r[data-v-74b699c6]{top:0;right:-6px;width:12px;height:100%;cursor:ew-resize}.vfm--resize-br[data-v-74b699c6]{bottom:-6px;right:-6px;cursor:nwse-resize}.vfm--resize-b[data-v-74b699c6]{bottom:-6px;left:0;width:100%;height:12px;cursor:ns-resize}.vfm--resize-bl[data-v-74b699c6]{bottom:-6px;left:-6px;cursor:nesw-resize}.vfm--resize-l[data-v-74b699c6]{top:0;left:-6px;width:12px;height:100%;cursor:ew-resize}.vfm--resize-tl[data-v-74b699c6]{top:-6px;left:-6px;cursor:nwse-resize}",map:void 0,media:void 0})}),H,"data-v-74b699c6",false,undefined,!1,(function(e){return function(e,t){return function(e,t){var n=F?t.media||"default":e,i=q[n]||(q[n]={ids:new Set,styles:[]});if(!i.ids.has(e)){i.ids.add(e);var o=t.source;if(t.map&&(o+="\n/*# sourceURL="+t.map.sources[0]+" */",o+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(t.map))))+" */"),i.element||(i.element=document.createElement("style"),i.element.type="text/css",t.media&&i.element.setAttribute("media",t.media),void 0===U&&(U=document.head||document.getElementsByTagName("head")[0]),U.appendChild(i.element)),"styleSheet"in i.element)i.styles.push(o),i.element.styleSheet.cssText=i.styles.filter(Boolean).join("\n");else{var r=i.ids.size-1,a=document.createTextNode(o),s=i.element.childNodes;s[r]&&i.element.removeChild(s[r]),s.length?i.element.insertBefore(a,s[r]):i.element.appendChild(a)}}}(e,t)}}),void 0,void 0),Y=K({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"v-dynamic-modals"},e._l(e.api.dynamicModals,(function(t,i){return n(t.component,e._g(e._b({key:t.id,tag:"component",on:{closed:function(t){return e.slice(i)},"before-open":function(n){return e.beforeOpen(n,t,i)},opened:t.opened},scopedSlots:e._u([e._l(t.slots,(function(t,i){return{key:i,fn:function(){return[e.isString(t)?n("div",{key:i,domProps:{innerHTML:e._s(t)}}):n(t.component,e._g(e._b({key:i,tag:"component"},"component",t.bind,!1),t.on))]},proxy:!0}}))],null,!0),model:{value:t.value,callback:function(n){e.$set(t,"value",n)},expression:"modal.value"}},"component",t.bind,!1),t.on))})),1)},staticRenderFns:[]},undefined,{props:{},methods:{slice:function(e){this.api.dynamicModals.splice(e,1)},beforeOpen:function(e,t,n){var i=this;e.ref.params=t.params,this.$nextTick((function(){t.value||(i.slice(n),t.reject("show"))}))},isString:function(e){return"string"==typeof e}}},undefined,false,undefined,!1,void 0,void 0,void 0);function X(e,t){var n=l(l({},e),{},{props:l({},e.props)});return Object.assign(n.props,{api:{type:Object,default:function(){return t}}}),n}var Z=0,G="$modal",J="VModal",Q="VDynamicModals",ee=function(){var e,t,n=(t=null,i.default.observable({show:function(e){for(var n=this,i=arguments.length,r=new Array(i>1?i-1:0),a=1;a<i;a++)r[a-1]=arguments[a];switch(o(e)){case"string":return this.toggle.apply(this,[e,!0].concat(r));case"object":return Promise.allSettled([new Promise((function(i,o){var a={value:!0,id:Symbol("dynamicModal"),component:t,bind:{},slots:{},on:{},params:r[0],reject:o,opened:function(){i("show")}};n.dynamicModals.push(Object.assign(a,e))}))])}},hide:function(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];return this.toggle(t,!1)},hideAll:function(){return this.hide.apply(this,c(this.openedModals.map((function(e){return e.name}))))},toggle:function(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),i=1;i<t;i++)n[i-1]=arguments[i];var o=Array.isArray(e)?this.get.apply(this,c(e)):this.get(e);return Promise.allSettled(o.map((function(e){return e.toggle.apply(e,n)})))},get:function(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];return this.modals.filter((function(e){return t.includes(e.name)}))},dynamicModals:[],openedModals:[],modals:[],_setDefaultModal:function(e){t=e}}));return a(e={},G,n),a(e,J,function(e){var t=X(W,e);return e._setDefaultModal(t),t}(n)),a(e,Q,function(e){return X(Y,e)}(n)),e},te=ee(),ne=te.$modal,ie=te.VModal,oe=te.VDynamicModals,re=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=0===Z?te:ee(),i=n.$modal,o=n.VModal,r=n.VDynamicModals;Z+=1;var a=t[G]||G,s=t.VModal||J,l=t.VDynamicModals||Q;e.prototype[a]=i,e.component(s,o),e.component(l,r)},ae=function(e){return{install:function(t,n){var i=Object.assign({},e,n);re(t,i)}}};ae.install=re,e.$modal=ne,e.VDynamicModals=oe,e.VModal=ie,e.createVfm=ee,e.installVfm=re,e.vfmPlugin=ae,Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=VueFinalModal.umd.js.map
diff --git a/dist/VueFinalModal.umd.js.map b/dist/VueFinalModal.umd.js.map
index f9a140b4..c4d5e798 100644
--- a/dist/VueFinalModal.umd.js.map
+++ b/dist/VueFinalModal.umd.js.map
@@ -1 +1 @@
-{"version":3,"file":"VueFinalModal.umd.js","sources":["../lib/utils/focusTrap.js","../lib/utils/dragResize.js","../lib/utils/bodyScrollLock.js","../lib/VueFinalModal.vue","../lib/PluginCore.js","../lib/utils/errors.js","../lib/Plugin.js"],"sourcesContent":["// stolen from vue-js-modal\n\nconst FOCUSABLE_ELEMENTS_QUERY =\n  'button:not([disabled]), ' +\n  'select:not([disabled]), ' +\n  'a[href]:not([disabled]), ' +\n  'area[href]:not([disabled]), ' +\n  '[contentEditable=\"\"]:not([disabled]), ' +\n  '[contentEditable=\"true\"]:not([disabled]), ' +\n  '[contentEditable=\"TRUE\"]:not([disabled]), ' +\n  'textarea:not([disabled]), ' +\n  'iframe:not([disabled]), ' +\n  'input:not([disabled]), ' +\n  'summary:not([disabled]), ' +\n  '[tabindex]:not([tabindex=\"-1\"])'\n\nconst isTabPressed = event => {\n  return event.key === 'Tab' || event.keyCode === 9\n}\n\nconst querySelectorAll = (element, selector) => {\n  return [...(element.querySelectorAll(selector) || [])]\n}\n\nconst queryFocusableElements = element => {\n  return querySelectorAll(element, FOCUSABLE_ELEMENTS_QUERY)\n}\n\nconst isFocused = element => {\n  return element == document.activeElement\n}\n\nconst isNothingFocused = () => {\n  return !document.activeElement\n}\n\nclass FocusTrap {\n  constructor() {\n    this.root = null\n    this.elements = []\n\n    this.onKeyDown = this.onKeyDown.bind(this)\n    this.enable = this.enable.bind(this)\n    this.disable = this.disable.bind(this)\n    this.firstElement = this.firstElement.bind(this)\n    this.lastElement = this.lastElement.bind(this)\n  }\n\n  lastElement() {\n    return this.elements[this.elements.length - 1] || null\n  }\n\n  firstElement() {\n    return this.elements[0] || null\n  }\n\n  onKeyDown(event) {\n    if (!isTabPressed(event)) {\n      return\n    }\n\n    // SHIFT + TAB\n    if (event.shiftKey) {\n      if (isFocused(this.firstElement())) {\n        this.lastElement().focus()\n        event.preventDefault()\n      }\n      return\n    }\n\n    // TAB\n    if (isNothingFocused() || isFocused(this.lastElement())) {\n      this.firstElement().focus()\n      event.preventDefault()\n      return\n    }\n  }\n\n  enabled() {\n    return !!this.root\n  }\n\n  enable(root) {\n    if (!root) {\n      return\n    }\n\n    this.root = root\n    this.elements = queryFocusableElements(this.root)\n\n    this.root.addEventListener('keydown', this.onKeyDown)\n  }\n\n  disable() {\n    this.root.removeEventListener('keydown', this.onKeyDown)\n    this.root = null\n  }\n}\n\nexport default FocusTrap\n","export const setStyle = (el, key, value) => {\n  const cacheStyle = el.style[key]\n  el.style[key] = value\n  return () => {\n    el.style[key] = cacheStyle\n  }\n}\n\nexport const getPosition = e => {\n  const { clientX: x, clientY: y } = e.targetTouches ? e.targetTouches[0] : e\n  return { x, y }\n}\n\nexport const capitalize = s => {\n  return s.charAt(0).toUpperCase() + s.slice(1)\n}\n\nexport const clamp = (min, num, max) => {\n  if (typeof min !== 'number') {\n    min = Math.min(num, max) || num\n  }\n  if (typeof max !== 'number') {\n    max = Math.max(num, min)\n  }\n  return Math.min(Math.max(num, min), max)\n}\n\nexport const trimPx = distance => {\n  return (distance && Number(distance.replace(/px$/, ''))) || 0\n}\n\nexport const validDragElement = (e, el, dragSelector) => {\n  if (dragSelector === '') return true\n  const list = [...el.querySelectorAll(dragSelector)]\n  return list.includes(e.target)\n}\n\nconst pointerType = {\n  down: {\n    pc: 'mousedown',\n    m: 'touchstart'\n  },\n  move: {\n    pc: 'mousemove',\n    m: 'touchmove'\n  },\n  up: {\n    pc: 'mouseup',\n    m: 'touchend'\n  }\n}\nexport const addListener = (type, el, callback) => {\n  el && el.addEventListener(pointerType[type].pc, callback)\n  el && el.addEventListener(pointerType[type].m, callback, { passive: false })\n}\nexport const removeListener = (type, el, callback) => {\n  el && el.removeEventListener(pointerType[type].pc, callback)\n  el && el.removeEventListener(pointerType[type].m, callback)\n}\n","// stolen from body-scroll-lock\n\n// Older browsers don't support event options, feature detect it.\nlet hasPassiveEvents = false\nif (typeof window !== 'undefined') {\n  const passiveTestOptions = {\n    get passive() {\n      hasPassiveEvents = true\n      return undefined\n    }\n  }\n  window.addEventListener('testPassive', null, passiveTestOptions)\n  window.removeEventListener('testPassive', null, passiveTestOptions)\n}\n\nconst isIosDevice =\n  typeof window !== 'undefined' &&\n  window.navigator &&\n  window.navigator.platform &&\n  (/iP(ad|hone|od)/.test(window.navigator.platform) ||\n    (window.navigator.platform === 'MacIntel' && window.navigator.maxTouchPoints > 1))\n\nlet locks = []\nlet documentListenerAdded = false\nlet clientY = 0\nlet initialClientY = -1\nlet previousBodyOverflowSetting\nlet previousBodyPaddingRight\n\nconst hasScrollbar = el => {\n  if (!el || el.nodeType !== Node.ELEMENT_NODE) return false\n\n  const style = window.getComputedStyle(el)\n  return ['auto', 'scroll'].includes(style.overflowY) && el.scrollHeight > el.clientHeight\n}\n\nconst shouldScroll = (el, delta) => {\n  if (el.scrollTop === 0 && delta < 0) return false\n  if (el.scrollTop + el.clientHeight + delta >= el.scrollHeight && delta > 0) return false\n  return true\n}\n\nconst composedPath = el => {\n  const path = []\n  while (el) {\n    path.push(el)\n    if (el.classList.contains('vfm')) return path\n    el = el.parentElement\n  }\n  return path\n}\n\nconst hasAnyScrollableEl = (el, delta) => {\n  let hasAnyScrollableEl = false\n  const path = composedPath(el)\n  path.forEach(el => {\n    if (hasScrollbar(el) && shouldScroll(el, delta)) {\n      hasAnyScrollableEl = true\n    }\n  })\n  return hasAnyScrollableEl\n}\n\n// returns true if `el` should be allowed to receive touchmove events.\nconst allowTouchMove = el => locks.some(() => hasAnyScrollableEl(el, -clientY))\n\nconst preventDefault = rawEvent => {\n  const e = rawEvent || window.event\n\n  // For the case whereby consumers adds a touchmove event listener to document.\n  // Recall that we do document.addEventListener('touchmove', preventDefault, { passive: false })\n  // in disableBodyScroll - so if we provide this opportunity to allowTouchMove, then\n  // the touchmove event on document will break.\n  if (allowTouchMove(e.target)) {\n    return true\n  }\n  // Do not prevent if the event has more than one touch (usually meaning this is a multi touch gesture like pinch to zoom).\n  if (e.touches.length > 1) return true\n\n  if (e.preventDefault) e.preventDefault()\n\n  return false\n}\n\nconst setOverflowHidden = options => {\n  // If previousBodyPaddingRight is already set, don't set it again.\n  if (previousBodyPaddingRight === undefined) {\n    const reserveScrollBarGap = !!options && options.reserveScrollBarGap === true\n    const scrollBarGap = window.innerWidth - document.documentElement.clientWidth\n\n    if (reserveScrollBarGap && scrollBarGap > 0) {\n      const computedBodyPaddingRight = parseInt(getComputedStyle(document.body).getPropertyValue('padding-right'), 10)\n      previousBodyPaddingRight = document.body.style.paddingRight\n      document.body.style.paddingRight = `${computedBodyPaddingRight + scrollBarGap}px`\n    }\n  }\n  // If previousBodyOverflowSetting is already set, don't set it again.\n  if (previousBodyOverflowSetting === undefined) {\n    previousBodyOverflowSetting = document.body.style.overflow\n    document.body.style.overflow = 'hidden'\n  }\n}\n\nconst restoreOverflowSetting = () => {\n  if (previousBodyPaddingRight !== undefined) {\n    document.body.style.paddingRight = previousBodyPaddingRight\n\n    // Restore previousBodyPaddingRight to undefined so setOverflowHidden knows it\n    // can be set again.\n    previousBodyPaddingRight = undefined\n  }\n\n  if (previousBodyOverflowSetting !== undefined) {\n    document.body.style.overflow = previousBodyOverflowSetting\n\n    // Restore previousBodyOverflowSetting to undefined\n    // so setOverflowHidden knows it can be set again.\n    previousBodyOverflowSetting = undefined\n  }\n}\n// https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#Problems_and_solutions\nconst isTargetElementTotallyScrolled = targetElement =>\n  targetElement ? targetElement.scrollHeight - targetElement.scrollTop <= targetElement.clientHeight : false\n\nconst handleScroll = (event, targetElement) => {\n  clientY = event.targetTouches[0].clientY - initialClientY\n\n  if (allowTouchMove(event.target)) {\n    return false\n  }\n\n  if (targetElement && targetElement.scrollTop === 0 && clientY > 0) {\n    // element is at the top of its scroll.\n    return preventDefault(event)\n  }\n\n  if (isTargetElementTotallyScrolled(targetElement) && clientY < 0) {\n    // element is at the bottom of its scroll.\n    return preventDefault(event)\n  }\n\n  event.stopPropagation()\n  return true\n}\n\nexport const disableBodyScroll = (targetElement, options) => {\n  // targetElement must be provided\n  if (!targetElement) {\n    // eslint-disable-next-line no-console\n    console.error(\n      'disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.'\n    )\n    return\n  }\n\n  // disableBodyScroll must not have been called on this targetElement before\n  if (locks.some(lock => lock.targetElement === targetElement)) {\n    return\n  }\n\n  const lock = {\n    targetElement,\n    options: options || {}\n  }\n\n  locks = [...locks, lock]\n\n  if (isIosDevice) {\n    targetElement.ontouchstart = event => {\n      if (event.targetTouches.length === 1) {\n        // detect single touch.\n        initialClientY = event.targetTouches[0].clientY\n      }\n    }\n    targetElement.ontouchmove = event => {\n      if (event.targetTouches.length === 1) {\n        // detect single touch.\n        handleScroll(event, targetElement)\n      }\n    }\n\n    if (!documentListenerAdded) {\n      document.addEventListener('touchmove', preventDefault, hasPassiveEvents ? { passive: false } : undefined)\n      documentListenerAdded = true\n    }\n  } else {\n    setOverflowHidden(options)\n  }\n}\n\nexport const enableBodyScroll = targetElement => {\n  if (!targetElement) {\n    // eslint-disable-next-line no-console\n    console.error(\n      'enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices.'\n    )\n    return\n  }\n\n  locks = locks.filter(lock => lock.targetElement !== targetElement)\n\n  if (isIosDevice) {\n    targetElement.ontouchstart = null\n    targetElement.ontouchmove = null\n\n    if (documentListenerAdded && locks.length === 0) {\n      document.removeEventListener('touchmove', preventDefault, hasPassiveEvents ? { passive: false } : undefined)\n      documentListenerAdded = false\n    }\n  } else if (!locks.length) {\n    restoreOverflowSetting()\n  }\n}\n","<template>\n  <div\n    v-if=\"ssr || visible\"\n    v-show=\"!ssr || visible\"\n    :style=\"bindStyle\"\n    class=\"vfm vfm--inset\"\n    :class=\"[attach === false ? 'vfm--fixed' : 'vfm--absolute', { 'vfm--prevent-none': preventClick }]\"\n    @keydown.esc=\"onEsc\"\n  >\n    <transition\n      ref=\"vfmOverlayTransition\"\n      v-bind=\"computedOverlayTransition\"\n      @before-enter=\"beforeOverlayEnter\"\n      @after-enter=\"afterOverlayEnter\"\n      @before-leave=\"beforeOverlayLeave\"\n      @after-leave=\"afterOverlayLeave\"\n    >\n      <div\n        v-show=\"!hideOverlay && visibility.overlay\"\n        class=\"vfm__overlay vfm--overlay vfm--absolute vfm--inset\"\n        :class=\"overlayClass\"\n        :style=\"overlayStyle\"\n      ></div>\n    </transition>\n    <transition\n      ref=\"vfmTransition\"\n      v-bind=\"computedTransition\"\n      @before-enter=\"beforeModalEnter\"\n      @after-enter=\"afterModalEnter\"\n      @before-leave=\"beforeModalLeave\"\n      @after-leave=\"afterModalLeave\"\n    >\n      <div\n        v-show=\"visibility.modal\"\n        ref=\"vfmContainer\"\n        class=\"vfm__container vfm--absolute vfm--inset vfm--outline-none\"\n        :class=\"classes\"\n        :style=\"styles\"\n        :aria-expanded=\"visibility.modal.toString()\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        tabindex=\"-1\"\n        @mouseup.self=\"onMouseupContainer\"\n        @mousedown.self=\"onMousedown\"\n      >\n        <div\n          ref=\"vfmContent\"\n          class=\"vfm__content\"\n          :class=\"[contentClass, { 'vfm--prevent-auto': preventClick }]\"\n          :style=\"bindContentStyle\"\n          @mousedown=\"onMousedown(null)\"\n        >\n          <slot :params=\"params\" :close=\"() => $emit('input', false)\" />\n          <div\n            v-if=\"visibility.resize && visibility.modal\"\n            ref=\"vfmResize\"\n            class=\"vfm__resize vfm--absolute vfm--inset vfm--prevent-none vfm--select-none vfm--touch-none\"\n          >\n            <div\n              v-for=\"direction in resizeDirections\"\n              :key=\"direction\"\n              :direction=\"direction\"\n              :class=\"`vfm--resize-${direction}`\"\n              class=\"vfm--absolute vfm--prevent-auto\"\n            ></div>\n          </div>\n        </div>\n      </div>\n    </transition>\n  </div>\n</template>\n\n<script>\nimport FocusTrap from './utils/focusTrap.js'\nimport {\n  setStyle,\n  getPosition,\n  capitalize,\n  clamp,\n  trimPx,\n  validDragElement,\n  addListener,\n  removeListener\n} from './utils/dragResize.js'\nimport { disableBodyScroll, enableBodyScroll } from './utils/bodyScrollLock'\n\nconst noop = () => {}\n\nconst TransitionState = {\n  Enter: 'enter',\n  Entering: 'entering',\n  Leave: 'leave',\n  Leaving: 'leavng'\n}\n\nfunction validateAttachTarget(val) {\n  const type = typeof val\n\n  if (type === 'boolean' || type === 'string') return true\n\n  return val.nodeType === Node.ELEMENT_NODE\n}\n\nconst CLASS_PROP = {\n  type: [String, Object, Array],\n  default: ''\n}\n\nconst STYLE_PROP = {\n  type: [Object, Array],\n  default: () => ({})\n}\n\nconst resizeCursor = {\n  t: 'ns-resize',\n  tr: 'nesw-resize',\n  r: 'ew-resize',\n  br: 'nwse-resize',\n  b: 'ns-resize',\n  bl: 'nesw-resize',\n  l: 'ew-resize',\n  tl: 'nwse-resize'\n}\n\nexport default {\n  props: {\n    name: { type: String, default: null },\n    value: { type: Boolean, default: false },\n    ssr: { type: Boolean, default: true },\n    classes: CLASS_PROP,\n    overlayClass: CLASS_PROP,\n    contentClass: CLASS_PROP,\n    styles: STYLE_PROP,\n    overlayStyle: STYLE_PROP,\n    contentStyle: STYLE_PROP,\n    lockScroll: { type: Boolean, default: true },\n    hideOverlay: { type: Boolean, default: false },\n    clickToClose: { type: Boolean, default: true },\n    escToClose: { type: Boolean, default: false },\n    preventClick: { type: Boolean, default: false },\n    attach: { type: null, default: false, validator: validateAttachTarget },\n    transition: { type: [String, Object], default: 'vfm' },\n    overlayTransition: { type: [String, Object], default: 'vfm' },\n    zIndexAuto: { type: Boolean, default: true },\n    zIndexBase: { type: [String, Number], default: 1000 },\n    zIndex: { type: [Boolean, String, Number], default: false },\n    focusRetain: { type: Boolean, default: true },\n    focusTrap: { type: Boolean, default: false },\n    fitParent: { type: Boolean, default: true },\n    drag: { type: Boolean, default: false },\n    dragSelector: { type: String, default: '' },\n    keepChangedStyle: { type: Boolean, default: false },\n    resize: {\n      type: Boolean,\n      default: false\n    },\n    resizeDirections: {\n      type: Array,\n      default: () => ['t', 'tr', 'r', 'br', 'b', 'bl', 'l', 'tl'],\n      validator: val =>\n        ['t', 'tr', 'r', 'br', 'b', 'bl', 'l', 'tl'].filter(value => val.indexOf(value) !== -1).length === val.length\n    },\n    minWidth: { type: Number, default: 0 },\n    minHeight: { type: Number, default: 0 },\n    maxWidth: { type: Number, default: Infinity },\n    maxHeight: { type: Number, default: Infinity }\n  },\n  data: () => ({\n    modalStackIndex: null,\n    visible: false,\n    visibility: {\n      modal: false,\n      overlay: false,\n      resize: false\n    },\n    overlayTransitionState: null,\n    modalTransitionState: null,\n    stopEvent: false,\n    params: {},\n    dragResizeStyle: {},\n    resolveToggle: noop,\n    rejectToggle: noop,\n    state: null,\n    lastMousedownEl: null\n  }),\n  computed: {\n    api() {\n      return this[this.$_options.key]\n    },\n    isComponentReadyToBeDestroyed() {\n      return (\n        (this.hideOverlay || this.overlayTransitionState === TransitionState.Leave) &&\n        this.modalTransitionState === TransitionState.Leave\n      )\n    },\n    calculateZIndex() {\n      if (this.zIndex === false) {\n        if (this.zIndexAuto) {\n          return +this.zIndexBase + 2 * (this.modalStackIndex || 0)\n        } else {\n          return false\n        }\n      } else {\n        return this.zIndex\n      }\n    },\n    bindStyle() {\n      return {\n        ...(this.calculateZIndex !== false && { zIndex: this.calculateZIndex })\n      }\n    },\n    bindContentStyle() {\n      let style = [this.dragResizeStyle]\n      Array.isArray(this.contentStyle) ? style.push(...this.contentStyle) : style.push(this.contentStyle)\n      return style\n    },\n    computedTransition() {\n      if (typeof this.transition === 'string') return { name: this.transition }\n      return { ...this.transition }\n    },\n    computedOverlayTransition() {\n      if (typeof this.overlayTransition === 'string') return { name: this.overlayTransition }\n      return { ...this.overlayTransition }\n    }\n  },\n  watch: {\n    value(value) {\n      if (this.stopEvent) {\n        this.stopEvent = false\n        return\n      }\n      this.mounted()\n      if (!value) {\n        if (this.emitEvent('before-close', true)) {\n          this.rejectToggle('hide')\n          return\n        }\n        this.close()\n      }\n    },\n    lockScroll: 'handleLockScroll',\n    hideOverlay(value) {\n      if (this.value && !value) {\n        this.visibility.overlay = true\n      }\n    },\n    attach: 'mounted',\n    isComponentReadyToBeDestroyed(isReady) {\n      if (isReady) {\n        this.visible = false\n      }\n    },\n    drag(value) {\n      if (this.visible) {\n        value ? this.addDragDown() : this.removeDragDown()\n      }\n    },\n    resize(value) {\n      if (this.visible) {\n        value ? this.addResizeDown() : this.removeResizeDown()\n      }\n    },\n    keepChangedStyle(value) {\n      if (!value) {\n        this.dragResizeStyle = {}\n      }\n    }\n  },\n  created() {\n    this.api.modals.push(this)\n  },\n  mounted() {\n    this.$focusTrap = new FocusTrap()\n    this.mounted()\n  },\n  beforeDestroy() {\n    this.close()\n    this.lockScroll && this.$refs.vfmContainer && enableBodyScroll(this.$refs.vfmContainer)\n    this?.$el?.remove()\n\n    let index = this.api.modals.findIndex(vm => vm === this)\n    this.api.modals.splice(index, 1)\n  },\n  methods: {\n    mounted() {\n      if (this.value) {\n        if (this.emitEvent('before-open', false)) {\n          this.rejectToggle('show')\n          return\n        }\n        let target = this.getAttachElement()\n        if (target || this.attach === false) {\n          this.attach !== false && target.appendChild(this.$el)\n\n          let index = this.api.openedModals.findIndex(vm => vm === this)\n          if (index !== -1) {\n            // if this is already exist in modalStack, delete it\n            this.api.openedModals.splice(index, 1)\n          }\n          this.api.openedModals.push(this)\n\n          this.modalStackIndex = this.api.openedModals.length - 1\n\n          this.handleLockScroll()\n          this.api.openedModals\n            .filter(vm => vm !== this)\n            .forEach((vm, index) => {\n              if (vm.getAttachElement() === target) {\n                // if vm and this have the same attach element\n                vm.modalStackIndex = index\n                vm.visibility.overlay = false\n              }\n            })\n\n          this.visible = true\n          this.$nextTick(() => {\n            this.startTransitionEnter()\n          })\n        } else if (target !== false) {\n          console.warn('Unable to locate target '.concat(this.attach))\n        }\n      }\n    },\n    close() {\n      let index = this.api.openedModals.findIndex(vm => vm === this)\n      if (index !== -1) {\n        // remove this in modalStack\n        this.api.openedModals.splice(index, 1)\n      }\n      if (this.api.openedModals.length > 0) {\n        // If there are still nested modals opened\n        const $_vm = this.api.openedModals[this.api.openedModals.length - 1]\n        if ($_vm.focusRetain || $_vm.focusTrap) {\n          $_vm.$refs.vfmContainer.focus()\n        }\n        !$_vm.hideOverlay && ($_vm.visibility.overlay = true)\n      }\n      this.drag && this.removeDragDown()\n      this.resize && this.removeResizeDown()\n      this.state = null\n\n      this.startTransitionLeave()\n    },\n    startTransitionEnter() {\n      this.visibility.overlay = true\n      this.visibility.modal = true\n    },\n    startTransitionLeave() {\n      this.visibility.overlay = false\n      this.visibility.modal = false\n    },\n    handleLockScroll() {\n      if (this.value) {\n        this.$nextTick(() => {\n          if (this.lockScroll) {\n            disableBodyScroll(this.$refs.vfmContainer, {\n              reserveScrollBarGap: true\n            })\n          } else {\n            enableBodyScroll(this.$refs.vfmContainer)\n          }\n        })\n      }\n    },\n    getAttachElement() {\n      let target\n      if (this.attach === false) {\n        target = false\n      } else if (typeof this.attach === 'string') {\n        // CSS selector\n        if (window) {\n          target = window.document.querySelector(this.attach)\n        } else {\n          target = false\n        }\n      } else {\n        // DOM Element\n        target = this.attach\n      }\n      return target\n    },\n    beforeOverlayEnter() {\n      this.overlayTransitionState = TransitionState.Entering\n    },\n    afterOverlayEnter() {\n      this.overlayTransitionState = TransitionState.Enter\n    },\n    beforeOverlayLeave() {\n      this.overlayTransitionState = TransitionState.Leaving\n    },\n    afterOverlayLeave() {\n      this.overlayTransitionState = TransitionState.Leave\n    },\n    beforeModalEnter() {\n      this.modalTransitionState = TransitionState.Entering\n    },\n    afterModalEnter() {\n      this.modalTransitionState = TransitionState.Enter\n      if (this.focusRetain || this.focusTrap) {\n        this.$refs.vfmContainer.focus()\n      }\n      this.focusTrap && this.$focusTrap.enable(this.$refs.vfmContainer)\n      this.drag && this.addDragDown()\n      this.resize && this.addResizeDown()\n\n      this.$emit('opened', this.createModalEvent({ type: 'opened' }))\n      this.resolveToggle('show')\n    },\n    beforeModalLeave() {\n      this.modalTransitionState = TransitionState.Leaving\n\n      if (this.$focusTrap.enabled()) {\n        this.$focusTrap.disable()\n      }\n    },\n    afterModalLeave() {\n      this.modalTransitionState = TransitionState.Leave\n      this.modalStackIndex = null\n      this.lockScroll && enableBodyScroll(this.$refs.vfmContainer)\n      if (!this.keepChangedStyle) {\n        this.dragResizeStyle = {}\n      }\n\n      let stopEvent = false\n      const event = this.createModalEvent({\n        type: 'closed',\n        stop() {\n          stopEvent = true\n        }\n      })\n      this.$emit('closed', event)\n      this.resolveToggle('hide')\n      if (stopEvent) return\n      this.params = {}\n    },\n    onMousedown(e) {\n      this.lastMousedownEl = e?.target\n    },\n    onMouseupContainer() {\n      // skip when the lastMousedownEl didn't equal $refs.vfmContainer\n      if (this.lastMousedownEl !== this.$refs.vfmContainer) return\n      // skip when state equal 'resize:move'\n      if (this.state === 'resize:move') return\n      this.$emit('click-outside', this.createModalEvent({ type: 'click-outside' }))\n      this.clickToClose && this.$emit('input', false)\n    },\n    onEsc() {\n      if (this.visible && this.escToClose) {\n        this.$emit('input', false)\n      }\n    },\n    createModalEvent(eventProps = {}) {\n      return {\n        ref: this,\n        ...eventProps\n      }\n    },\n    emitEvent(eventType, value) {\n      let stopEvent = false\n      const event = this.createModalEvent({\n        type: eventType,\n        stop() {\n          stopEvent = true\n        }\n      })\n      this.$emit(eventType, event)\n      if (stopEvent) {\n        this.stopEvent = true\n        this.$emit('input', value)\n        return true\n      }\n      return false\n    },\n    emitState(e, state, action) {\n      this.state = `${state}:${action}`\n      this.$emit(this.state, e)\n    },\n    toggle(show, params) {\n      return new Promise((resolve, reject) => {\n        this.resolveToggle = res => {\n          resolve(res)\n          this.resolveToggle = noop\n        }\n        this.rejectToggle = err => {\n          reject(err)\n          this.rejectToggle = noop\n        }\n        const value = typeof show === 'boolean' ? show : !this.value\n        if (value && arguments.length === 2) {\n          this.params = params\n        }\n        this.$emit('input', value)\n      })\n    },\n    pointerDown(e) {\n      e.stopPropagation()\n      const STATE_RESIZE = 'resize'\n      const STATE_DRAG = 'drag'\n      const { vfmContainer, vfmContent } = this.$refs\n      const direction = e.target.getAttribute('direction')\n      let state\n      if (direction) {\n        state = STATE_RESIZE\n      } else if (validDragElement(e, vfmContent, this.dragSelector)) {\n        state = STATE_DRAG\n      } else {\n        return\n      }\n      this.emitState(e, state, 'start')\n      const down = getPosition(e)\n      const rectContainer = vfmContainer.getBoundingClientRect()\n      const rectContent = vfmContent.getBoundingClientRect()\n      const isAbsolute = window.getComputedStyle(vfmContent).position === 'absolute'\n      const position = {\n        top: trimPx(this.dragResizeStyle.top),\n        left: trimPx(this.dragResizeStyle.left)\n      }\n      const limit = (() => {\n        if (this.fitParent) {\n          const limit = {\n            absolute() {\n              return {\n                minTop: 0,\n                minLeft: 0,\n                maxTop: rectContainer.height - rectContent.height,\n                maxLeft: rectContainer.width - rectContent.width\n              }\n            },\n            relative() {\n              return {\n                minTop: position.top + rectContainer.top - rectContent.top,\n                minLeft: position.left + rectContainer.left - rectContent.left,\n                maxTop: position.top + rectContainer.bottom - rectContent.bottom,\n                maxLeft: position.left + rectContainer.right - rectContent.right\n              }\n            }\n          }\n          return isAbsolute ? limit.absolute() : limit.relative()\n        } else {\n          return {}\n        }\n      })()\n      const resetBodyCursor = state === STATE_RESIZE && setStyle(document.body, 'cursor', resizeCursor[direction])\n\n      const moving = e => {\n        // onPointerMove\n        e.stopPropagation()\n        this.emitState(e, state, 'move')\n        const move = getPosition(e)\n        let offset = {\n          x: move.x - down.x,\n          y: move.y - down.y\n        }\n        if (state === STATE_RESIZE) {\n          offset = this.getResizeOffset(direction, offset, rectContainer, rectContent, isAbsolute)\n        }\n\n        let top\n        let left\n        if (isAbsolute) {\n          top = rectContent.top - rectContainer.top + offset.y\n          left = rectContent.left - rectContainer.left + offset.x\n        } else {\n          top = position.top + offset.y\n          left = position.left + offset.x\n        }\n        if (state === STATE_DRAG && this.fitParent) {\n          top = clamp(limit.minTop, top, limit.maxTop)\n          left = clamp(limit.minLeft, left, limit.maxLeft)\n        }\n        const style = {\n          position: 'relative',\n          top: top + 'px',\n          left: left + 'px',\n          margin: 'unset',\n          touchAction: 'none',\n          ...(isAbsolute && {\n            position: 'absolute',\n            transform: 'unset',\n            width: rectContent.width + 'px',\n            height: rectContent.height + 'px'\n          }),\n          ...(offset.width && { width: offset.width + 'px' }),\n          ...(offset.height && { height: offset.height + 'px' })\n        }\n\n        this.dragResizeStyle = {\n          ...this.dragResizeStyle,\n          ...style\n        }\n      }\n      const end = e => {\n        // onPointerUp\n        e.stopPropagation()\n        if (state === STATE_RESIZE) {\n          resetBodyCursor && resetBodyCursor()\n        }\n        // Excute onClickContainer before trigger emitState\n        setTimeout(() => {\n          this.emitState(e, state, 'end')\n        })\n        removeListener('move', document, moving)\n        removeListener('up', document, end)\n      }\n      addListener('move', document, moving)\n      addListener('up', document, end)\n    },\n    addDragDown() {\n      addListener('down', this.$refs.vfmContent, this.pointerDown)\n      this.dragResizeStyle.touchAction = 'none'\n    },\n    removeDragDown() {\n      removeListener('down', this.$refs.vfmContent, this.pointerDown)\n    },\n    addResizeDown() {\n      this.visibility.resize = true\n      this.$nextTick(() => {\n        addListener('down', this.$refs.vfmResize, this.pointerDown)\n      })\n    },\n    removeResizeDown() {\n      removeListener('down', this.$refs.vfmResize, this.pointerDown)\n      this.visibility.resize = false\n    },\n    getResizeOffset(direction, offset, rectContainer, rectContent, isAbsolute) {\n      const setOffset = dir => {\n        let offsetAxis = offset[dir.axis]\n        offsetAxis = this.fitParent ? clamp(dir.min, offsetAxis, dir.max) : offsetAxis\n        let edge = clamp(dir.minEdge, dir.getEdge(offsetAxis), dir.maxEdge)\n        offsetAxis = dir.getOffsetAxis(edge, isAbsolute)\n        return {\n          [dir.edgeName]: edge,\n          [dir.axis]: offsetAxis\n        }\n      }\n\n      const getDirectionInfo = (position, edgeName, axis, isPositive) => {\n        const rectContentEdge = rectContent[edgeName]\n        const positionOffset = rectContainer[position] - rectContent[position]\n        const EdgeName = capitalize(edgeName)\n        return {\n          axis,\n          edgeName,\n          min: isPositive ? positionOffset : -rectContentEdge,\n          max: isPositive ? rectContentEdge : positionOffset,\n          minEdge: this[`min${EdgeName}`],\n          maxEdge: this[`max${EdgeName}`],\n          getEdge: offsetAxis => rectContent[edgeName] - offsetAxis * (isPositive ? 1 : -1),\n          getOffsetAxis: (edge, isAbsolute) => {\n            const offsetAxis = rectContent[edgeName] - edge\n            if (isAbsolute) {\n              return isPositive ? offsetAxis : 0\n            } else {\n              return ((isPositive ? 1 : -1) * offsetAxis) / 2\n            }\n          }\n        }\n      }\n\n      const directions = {\n        t: ['top', 'height', 'y', true],\n        b: ['bottom', 'height', 'y', false],\n        l: ['left', 'width', 'x', true],\n        r: ['right', 'width', 'x', false]\n      }\n\n      let _offset = { x: 0, y: 0 }\n      direction.split('').forEach(dir => {\n        const directionInfo = getDirectionInfo(...directions[dir])\n        _offset = {\n          ..._offset,\n          ...setOffset(directionInfo)\n        }\n      })\n      return _offset\n    }\n  }\n}\n</script>\n\n<style lang=\"css\" scoped>\n.vfm--fixed {\n  position: fixed;\n}\n.vfm--absolute {\n  position: absolute;\n}\n.vfm--inset {\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n}\n.vfm--overlay {\n  background-color: rgba(0, 0, 0, 0.5);\n}\n.vfm--prevent-none {\n  pointer-events: none;\n}\n.vfm--prevent-auto {\n  pointer-events: auto;\n}\n.vfm--outline-none:focus {\n  outline: none;\n}\n.vfm-enter-active,\n.vfm-leave-active {\n  transition: opacity 0.2s;\n}\n.vfm-enter,\n.vfm-leave-to {\n  opacity: 0;\n}\n\n.vfm--touch-none {\n  touch-action: none;\n}\n.vfm--select-none {\n  user-select: none;\n}\n\n.vfm--resize-tr,\n.vfm--resize-br,\n.vfm--resize-bl,\n.vfm--resize-tl {\n  width: 12px;\n  height: 12px;\n  z-index: 10;\n}\n\n.vfm--resize-t {\n  top: -6px;\n  left: 0;\n  width: 100%;\n  height: 12px;\n  cursor: ns-resize;\n}\n.vfm--resize-tr {\n  top: -6px;\n  right: -6px;\n  cursor: nesw-resize;\n}\n.vfm--resize-r {\n  top: 0;\n  right: -6px;\n  width: 12px;\n  height: 100%;\n  cursor: ew-resize;\n}\n.vfm--resize-br {\n  bottom: -6px;\n  right: -6px;\n  cursor: nwse-resize;\n}\n.vfm--resize-b {\n  bottom: -6px;\n  left: 0;\n  width: 100%;\n  height: 12px;\n  cursor: ns-resize;\n}\n.vfm--resize-bl {\n  bottom: -6px;\n  left: -6px;\n  cursor: nesw-resize;\n}\n.vfm--resize-l {\n  top: 0;\n  left: -6px;\n  width: 12px;\n  height: 100%;\n  cursor: ew-resize;\n}\n.vfm--resize-tl {\n  top: -6px;\n  left: -6px;\n  cursor: nwse-resize;\n}\n</style>\n","import VueFinalModal from './VueFinalModal.vue'\nimport ModalsContainer from './ModalsContainer.vue'\n\nfunction assignOptions(component, options) {\n  const _component = { ...component }\n  Object.assign(_component.props, {\n    $_options: { type: Object, default: () => options }\n  })\n  return _component\n}\n\nfunction createVfm(Vue, options) {\n  let vfm\n\n  return function() {\n    vfm = {\n      show(modal, ...args) {\n        switch (typeof modal) {\n          case 'string':\n            return this.toggle(modal, true, ...args)\n          case 'object': {\n            return Promise.allSettled([\n              new Promise((resolve, reject) => {\n                const defaultModal = {\n                  value: true,\n                  id: Symbol('dynamicModal'),\n                  component: options.componentName,\n                  bind: {},\n                  slots: {},\n                  on: {},\n                  params: args[0],\n                  reject,\n                  opened() {\n                    resolve('show')\n                  }\n                }\n                this.dynamicModals.push(Object.assign(defaultModal, modal))\n              })\n            ])\n          }\n        }\n      },\n      hide(...names) {\n        return this.toggle(names, false)\n      },\n      hideAll() {\n        return this.hide(...this.openedModals.map(modal => modal.name))\n      },\n      toggle(name, ...args) {\n        const modals = Array.isArray(name) ? this.get(...name) : this.get(name)\n        return Promise.allSettled(modals.map(modal => modal.toggle(...args)))\n      },\n      get(...names) {\n        return this.modals.filter(modal => names.includes(modal.name))\n      },\n      dynamicModals: [],\n      openedModals: [],\n      modals: []\n    }\n    return Vue.observable(vfm)\n  }\n}\n\nexport function bindPrototype(Vue, options) {\n  const vfm = createVfm(Vue, options)()\n  Object.defineProperty(Vue.prototype, options.key, {\n    get() {\n      return vfm\n    }\n  })\n}\n\nexport function registModal(Vue, options) {\n  Vue.component(options.componentName, assignOptions(VueFinalModal, options))\n}\nexport function registContainer(Vue, options) {\n  Vue.component(options.dynamicContainerName, assignOptions(ModalsContainer, options))\n}\n","export const DUPLICATE_KEY = '[vue-final-modal] Duplicate registration API key of VueFinalModal.'\n\nexport const DUPLICATE_COMPONENT = '[vue-final-modal] Duplicate registration componentName of VueFinalModal.'\n\nexport const DUPLICATE_DYNAMIC_CONTAINER =\n  '[vue-final-modal] Duplicate registration dynamicContainerName of ModalsContainer.'\n","import { bindPrototype, registModal, registContainer } from './PluginCore'\nimport { DUPLICATE_KEY, DUPLICATE_COMPONENT, DUPLICATE_DYNAMIC_CONTAINER } from './utils/errors'\n\nconst defaultOptions = {\n  componentName: 'VueFinalModal',\n  dynamicContainerName: 'ModalsContainer',\n  key: '$vfm'\n}\n\nconst validPlugin = (duplicateKey, duplicateComponent, duplicateDynamicContainer) => {\n  if (!(duplicateKey || duplicateComponent || duplicateDynamicContainer)) return true\n\n  if (typeof window === 'undefined') return false\n\n  duplicateKey && console.error(DUPLICATE_KEY)\n  duplicateComponent && console.error(DUPLICATE_COMPONENT)\n  duplicateDynamicContainer && console.error(DUPLICATE_DYNAMIC_CONTAINER)\n\n  return false\n}\n\nconst Plugin = pluginOptions => ({\n  install(Vue, options) {\n    const _options = Object.assign({}, defaultOptions, pluginOptions, options)\n    const duplicateKey = Vue.prototype[_options.key]\n    const duplicateComponent = Vue.options.components[_options.componentName]\n    const duplicateDynamicContainer = Vue.options.components[_options.dynamicContainerName]\n\n    if (validPlugin(duplicateKey, duplicateComponent, duplicateDynamicContainer)) {\n      bindPrototype(Vue, _options)\n      registModal(Vue, _options)\n      registContainer(Vue, _options)\n    }\n  }\n})\n\nexport default Plugin\n"],"names":["queryFocusableElements","element","selector","querySelectorAll","isFocused","document","activeElement","FocusTrap","root","elements","onKeyDown","this","bind","enable","disable","firstElement","lastElement","length","event","key","keyCode","isTabPressed","shiftKey","focus","preventDefault","addEventListener","removeEventListener","getPosition","e","targetTouches","x","clientX","y","clientY","clamp","min","num","max","Math","trimPx","distance","Number","replace","pointerType","down","pc","m","move","up","addListener","type","el","callback","passive","removeListener","hasPassiveEvents","window","passiveTestOptions","previousBodyOverflowSetting","previousBodyPaddingRight","isIosDevice","navigator","platform","test","maxTouchPoints","locks","documentListenerAdded","initialClientY","hasAnyScrollableEl","delta","path","push","classList","contains","parentElement","composedPath","forEach","nodeType","Node","ELEMENT_NODE","style","getComputedStyle","includes","overflowY","scrollHeight","clientHeight","hasScrollbar","scrollTop","shouldScroll","allowTouchMove","some","rawEvent","target","touches","disableBodyScroll","targetElement","options","lock","ontouchstart","ontouchmove","isTargetElementTotallyScrolled","stopPropagation","handleScroll","undefined","reserveScrollBarGap","scrollBarGap","innerWidth","documentElement","clientWidth","computedBodyPaddingRight","parseInt","body","getPropertyValue","paddingRight","overflow","setOverflowHidden","console","error","enableBodyScroll","filter","dragSelector","value","cacheStyle","s","charAt","toUpperCase","slice","assignOptions","component","_component","Object","assign","props","$_options","bindPrototype","Vue","vfm","show","modal","args","toggle","Promise","allSettled","resolve","reject","defaultModal","id","Symbol","componentName","slots","on","params","opened","_this","dynamicModals","hide","names","hideAll","openedModals","map","name","modals","Array","isArray","get","observable","createVfm","defineProperty","prototype","defaultOptions","dynamicContainerName","pluginOptions","install","_options","duplicateKey","duplicateComponent","duplicateDynamicContainer","validPlugin","components","VueFinalModal","registModal","ModalsContainer","registContainer"],"mappings":"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"}
\ No newline at end of file
+{"version":3,"file":"VueFinalModal.umd.js","sources":["../lib/utils/focusTrap.js","../lib/utils/dragResize.js","../lib/utils/bodyScrollLock.js","../lib/VModal.vue","../lib/PluginCore.js","../lib/Plugin.js"],"sourcesContent":["// stolen from vue-js-modal\n\nconst FOCUSABLE_ELEMENTS_QUERY =\n  'button:not([disabled]), ' +\n  'select:not([disabled]), ' +\n  'a[href]:not([disabled]), ' +\n  'area[href]:not([disabled]), ' +\n  '[contentEditable=\"\"]:not([disabled]), ' +\n  '[contentEditable=\"true\"]:not([disabled]), ' +\n  '[contentEditable=\"TRUE\"]:not([disabled]), ' +\n  'textarea:not([disabled]), ' +\n  'iframe:not([disabled]), ' +\n  'input:not([disabled]), ' +\n  'summary:not([disabled]), ' +\n  '[tabindex]:not([tabindex=\"-1\"])'\n\nconst isTabPressed = event => {\n  return event.key === 'Tab' || event.keyCode === 9\n}\n\nconst querySelectorAll = (element, selector) => {\n  return [...(element.querySelectorAll(selector) || [])]\n}\n\nconst queryFocusableElements = element => {\n  return querySelectorAll(element, FOCUSABLE_ELEMENTS_QUERY)\n}\n\nconst isFocused = element => {\n  return element == document.activeElement\n}\n\nconst isNothingFocused = () => {\n  return !document.activeElement\n}\n\nclass FocusTrap {\n  constructor() {\n    this.root = null\n    this.elements = []\n\n    this.onKeyDown = this.onKeyDown.bind(this)\n    this.enable = this.enable.bind(this)\n    this.disable = this.disable.bind(this)\n    this.firstElement = this.firstElement.bind(this)\n    this.lastElement = this.lastElement.bind(this)\n  }\n\n  lastElement() {\n    return this.elements[this.elements.length - 1] || null\n  }\n\n  firstElement() {\n    return this.elements[0] || null\n  }\n\n  onKeyDown(event) {\n    if (!isTabPressed(event)) {\n      return\n    }\n\n    // SHIFT + TAB\n    if (event.shiftKey) {\n      if (isFocused(this.firstElement())) {\n        this.lastElement().focus()\n        event.preventDefault()\n      }\n      return\n    }\n\n    // TAB\n    if (isNothingFocused() || isFocused(this.lastElement())) {\n      this.firstElement().focus()\n      event.preventDefault()\n      return\n    }\n  }\n\n  enabled() {\n    return !!this.root\n  }\n\n  enable(root) {\n    if (!root) {\n      return\n    }\n\n    this.root = root\n    this.elements = queryFocusableElements(this.root)\n\n    this.root.addEventListener('keydown', this.onKeyDown)\n  }\n\n  disable() {\n    this.root.removeEventListener('keydown', this.onKeyDown)\n    this.root = null\n  }\n}\n\nexport default FocusTrap\n","export const setStyle = (el, key, value) => {\n  const cacheStyle = el.style[key]\n  el.style[key] = value\n  return () => {\n    el.style[key] = cacheStyle\n  }\n}\n\nexport const getPosition = e => {\n  const { clientX: x, clientY: y } = e.targetTouches ? e.targetTouches[0] : e\n  return { x, y }\n}\n\nexport const capitalize = s => {\n  return s.charAt(0).toUpperCase() + s.slice(1)\n}\n\nexport const clamp = (min, num, max) => {\n  if (typeof min !== 'number') {\n    min = Math.min(num, max) || num\n  }\n  if (typeof max !== 'number') {\n    max = Math.max(num, min)\n  }\n  return Math.min(Math.max(num, min), max)\n}\n\nexport const trimPx = distance => {\n  return (distance && Number(distance.replace(/px$/, ''))) || 0\n}\n\nexport const validDragElement = (e, el, dragSelector) => {\n  if (dragSelector === '') return true\n  const list = [...el.querySelectorAll(dragSelector)]\n  return list.includes(e.target)\n}\n\nconst pointerType = {\n  down: {\n    pc: 'mousedown',\n    m: 'touchstart'\n  },\n  move: {\n    pc: 'mousemove',\n    m: 'touchmove'\n  },\n  up: {\n    pc: 'mouseup',\n    m: 'touchend'\n  }\n}\nexport const addListener = (type, el, callback) => {\n  el && el.addEventListener(pointerType[type].pc, callback)\n  el && el.addEventListener(pointerType[type].m, callback, { passive: false })\n}\nexport const removeListener = (type, el, callback) => {\n  el && el.removeEventListener(pointerType[type].pc, callback)\n  el && el.removeEventListener(pointerType[type].m, callback)\n}\n","// stolen from body-scroll-lock\n\n// Older browsers don't support event options, feature detect it.\nlet hasPassiveEvents = false\nif (typeof window !== 'undefined') {\n  const passiveTestOptions = {\n    get passive() {\n      hasPassiveEvents = true\n      return undefined\n    }\n  }\n  window.addEventListener('testPassive', null, passiveTestOptions)\n  window.removeEventListener('testPassive', null, passiveTestOptions)\n}\n\nconst isIosDevice =\n  typeof window !== 'undefined' &&\n  window.navigator &&\n  window.navigator.platform &&\n  (/iP(ad|hone|od)/.test(window.navigator.platform) ||\n    (window.navigator.platform === 'MacIntel' && window.navigator.maxTouchPoints > 1))\n\nlet locks = []\nlet documentListenerAdded = false\nlet clientY = 0\nlet initialClientY = -1\nlet previousBodyOverflowSetting\nlet previousBodyPaddingRight\n\nconst hasScrollbar = el => {\n  if (!el || el.nodeType !== Node.ELEMENT_NODE) return false\n\n  const style = window.getComputedStyle(el)\n  return ['auto', 'scroll'].includes(style.overflowY) && el.scrollHeight > el.clientHeight\n}\n\nconst shouldScroll = (el, delta) => {\n  if (el.scrollTop === 0 && delta < 0) return false\n  if (el.scrollTop + el.clientHeight + delta >= el.scrollHeight && delta > 0) return false\n  return true\n}\n\nconst composedPath = el => {\n  const path = []\n  while (el) {\n    path.push(el)\n    if (el.classList.contains('vfm')) return path\n    el = el.parentElement\n  }\n  return path\n}\n\nconst hasAnyScrollableEl = (el, delta) => {\n  let hasAnyScrollableEl = false\n  const path = composedPath(el)\n  path.forEach(el => {\n    if (hasScrollbar(el) && shouldScroll(el, delta)) {\n      hasAnyScrollableEl = true\n    }\n  })\n  return hasAnyScrollableEl\n}\n\n// returns true if `el` should be allowed to receive touchmove events.\nconst allowTouchMove = el => locks.some(() => hasAnyScrollableEl(el, -clientY))\n\nconst preventDefault = rawEvent => {\n  const e = rawEvent || window.event\n\n  // For the case whereby consumers adds a touchmove event listener to document.\n  // Recall that we do document.addEventListener('touchmove', preventDefault, { passive: false })\n  // in disableBodyScroll - so if we provide this opportunity to allowTouchMove, then\n  // the touchmove event on document will break.\n  if (allowTouchMove(e.target)) {\n    return true\n  }\n  // Do not prevent if the event has more than one touch (usually meaning this is a multi touch gesture like pinch to zoom).\n  if (e.touches.length > 1) return true\n\n  if (e.preventDefault) e.preventDefault()\n\n  return false\n}\n\nconst setOverflowHidden = options => {\n  // If previousBodyPaddingRight is already set, don't set it again.\n  if (previousBodyPaddingRight === undefined) {\n    const reserveScrollBarGap = !!options && options.reserveScrollBarGap === true\n    const scrollBarGap = window.innerWidth - document.documentElement.clientWidth\n\n    if (reserveScrollBarGap && scrollBarGap > 0) {\n      const computedBodyPaddingRight = parseInt(getComputedStyle(document.body).getPropertyValue('padding-right'), 10)\n      previousBodyPaddingRight = document.body.style.paddingRight\n      document.body.style.paddingRight = `${computedBodyPaddingRight + scrollBarGap}px`\n    }\n  }\n  // If previousBodyOverflowSetting is already set, don't set it again.\n  if (previousBodyOverflowSetting === undefined) {\n    previousBodyOverflowSetting = document.body.style.overflow\n    document.body.style.overflow = 'hidden'\n  }\n}\n\nconst restoreOverflowSetting = () => {\n  if (previousBodyPaddingRight !== undefined) {\n    document.body.style.paddingRight = previousBodyPaddingRight\n\n    // Restore previousBodyPaddingRight to undefined so setOverflowHidden knows it\n    // can be set again.\n    previousBodyPaddingRight = undefined\n  }\n\n  if (previousBodyOverflowSetting !== undefined) {\n    document.body.style.overflow = previousBodyOverflowSetting\n\n    // Restore previousBodyOverflowSetting to undefined\n    // so setOverflowHidden knows it can be set again.\n    previousBodyOverflowSetting = undefined\n  }\n}\n// https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#Problems_and_solutions\nconst isTargetElementTotallyScrolled = targetElement =>\n  targetElement ? targetElement.scrollHeight - targetElement.scrollTop <= targetElement.clientHeight : false\n\nconst handleScroll = (event, targetElement) => {\n  clientY = event.targetTouches[0].clientY - initialClientY\n\n  if (allowTouchMove(event.target)) {\n    return false\n  }\n\n  if (targetElement && targetElement.scrollTop === 0 && clientY > 0) {\n    // element is at the top of its scroll.\n    return preventDefault(event)\n  }\n\n  if (isTargetElementTotallyScrolled(targetElement) && clientY < 0) {\n    // element is at the bottom of its scroll.\n    return preventDefault(event)\n  }\n\n  event.stopPropagation()\n  return true\n}\n\nexport const disableBodyScroll = (targetElement, options) => {\n  // targetElement must be provided\n  if (!targetElement) {\n    // eslint-disable-next-line no-console\n    console.error(\n      'disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.'\n    )\n    return\n  }\n\n  // disableBodyScroll must not have been called on this targetElement before\n  if (locks.some(lock => lock.targetElement === targetElement)) {\n    return\n  }\n\n  const lock = {\n    targetElement,\n    options: options || {}\n  }\n\n  locks = [...locks, lock]\n\n  if (isIosDevice) {\n    targetElement.ontouchstart = event => {\n      if (event.targetTouches.length === 1) {\n        // detect single touch.\n        initialClientY = event.targetTouches[0].clientY\n      }\n    }\n    targetElement.ontouchmove = event => {\n      if (event.targetTouches.length === 1) {\n        // detect single touch.\n        handleScroll(event, targetElement)\n      }\n    }\n\n    if (!documentListenerAdded) {\n      document.addEventListener('touchmove', preventDefault, hasPassiveEvents ? { passive: false } : undefined)\n      documentListenerAdded = true\n    }\n  } else {\n    setOverflowHidden(options)\n  }\n}\n\nexport const enableBodyScroll = targetElement => {\n  if (!targetElement) {\n    // eslint-disable-next-line no-console\n    console.error(\n      'enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices.'\n    )\n    return\n  }\n\n  locks = locks.filter(lock => lock.targetElement !== targetElement)\n\n  if (isIosDevice) {\n    targetElement.ontouchstart = null\n    targetElement.ontouchmove = null\n\n    if (documentListenerAdded && locks.length === 0) {\n      document.removeEventListener('touchmove', preventDefault, hasPassiveEvents ? { passive: false } : undefined)\n      documentListenerAdded = false\n    }\n  } else if (!locks.length) {\n    restoreOverflowSetting()\n  }\n}\n","<template>\n  <div\n    v-if=\"ssr || visible\"\n    v-show=\"!ssr || visible\"\n    :style=\"bindStyle\"\n    class=\"vfm vfm--inset\"\n    :class=\"[attach === false ? 'vfm--fixed' : 'vfm--absolute', { 'vfm--prevent-none': preventClick }]\"\n    @keydown.esc=\"onEsc\"\n  >\n    <transition\n      ref=\"vfmOverlayTransition\"\n      v-bind=\"computedOverlayTransition\"\n      @before-enter=\"beforeOverlayEnter\"\n      @after-enter=\"afterOverlayEnter\"\n      @before-leave=\"beforeOverlayLeave\"\n      @after-leave=\"afterOverlayLeave\"\n    >\n      <div\n        v-show=\"!hideOverlay && visibility.overlay\"\n        class=\"vfm__overlay vfm--overlay vfm--absolute vfm--inset\"\n        :class=\"overlayClass\"\n        :style=\"overlayStyle\"\n      ></div>\n    </transition>\n    <transition\n      ref=\"vfmTransition\"\n      v-bind=\"computedTransition\"\n      @before-enter=\"beforeModalEnter\"\n      @after-enter=\"afterModalEnter\"\n      @before-leave=\"beforeModalLeave\"\n      @after-leave=\"afterModalLeave\"\n    >\n      <div\n        v-show=\"visibility.modal\"\n        ref=\"vfmContainer\"\n        class=\"vfm__container vfm--absolute vfm--inset vfm--outline-none\"\n        :class=\"classes\"\n        :style=\"styles\"\n        :aria-expanded=\"visibility.modal.toString()\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        tabindex=\"-1\"\n        @mouseup.self=\"onMouseupContainer\"\n        @mousedown.self=\"onMousedown\"\n      >\n        <div\n          ref=\"vfmContent\"\n          class=\"vfm__content\"\n          :class=\"[contentClass, { 'vfm--prevent-auto': preventClick }]\"\n          :style=\"bindContentStyle\"\n          @mousedown=\"onMousedown(null)\"\n        >\n          <slot :params=\"params\" :close=\"() => $emit('input', false)\" />\n          <div\n            v-if=\"visibility.resize && visibility.modal\"\n            ref=\"vfmResize\"\n            class=\"vfm__resize vfm--absolute vfm--inset vfm--prevent-none vfm--select-none vfm--touch-none\"\n          >\n            <div\n              v-for=\"direction in resizeDirections\"\n              :key=\"direction\"\n              :direction=\"direction\"\n              :class=\"`vfm--resize-${direction}`\"\n              class=\"vfm--absolute vfm--prevent-auto\"\n            ></div>\n          </div>\n        </div>\n      </div>\n    </transition>\n  </div>\n</template>\n\n<script>\nimport FocusTrap from './utils/focusTrap.js'\nimport {\n  setStyle,\n  getPosition,\n  capitalize,\n  clamp,\n  trimPx,\n  validDragElement,\n  addListener,\n  removeListener\n} from './utils/dragResize.js'\nimport { disableBodyScroll, enableBodyScroll } from './utils/bodyScrollLock'\n\nconst noop = () => {}\n\nconst TransitionState = {\n  Enter: 'enter',\n  Entering: 'entering',\n  Leave: 'leave',\n  Leaving: 'leavng'\n}\n\nfunction validateAttachTarget(val) {\n  const type = typeof val\n\n  if (type === 'boolean' || type === 'string') return true\n\n  return val.nodeType === Node.ELEMENT_NODE\n}\n\nconst CLASS_PROP = {\n  type: [String, Object, Array],\n  default: ''\n}\n\nconst STYLE_PROP = {\n  type: [Object, Array],\n  default: () => ({})\n}\n\nconst resizeCursor = {\n  t: 'ns-resize',\n  tr: 'nesw-resize',\n  r: 'ew-resize',\n  br: 'nwse-resize',\n  b: 'ns-resize',\n  bl: 'nesw-resize',\n  l: 'ew-resize',\n  tl: 'nwse-resize'\n}\n\nexport default {\n  props: {\n    name: { type: String, default: null },\n    value: { type: Boolean, default: false },\n    ssr: { type: Boolean, default: true },\n    classes: CLASS_PROP,\n    overlayClass: CLASS_PROP,\n    contentClass: CLASS_PROP,\n    styles: STYLE_PROP,\n    overlayStyle: STYLE_PROP,\n    contentStyle: STYLE_PROP,\n    lockScroll: { type: Boolean, default: true },\n    hideOverlay: { type: Boolean, default: false },\n    clickToClose: { type: Boolean, default: true },\n    escToClose: { type: Boolean, default: false },\n    preventClick: { type: Boolean, default: false },\n    attach: { type: null, default: false, validator: validateAttachTarget },\n    transition: { type: [String, Object], default: 'vfm' },\n    overlayTransition: { type: [String, Object], default: 'vfm' },\n    zIndexAuto: { type: Boolean, default: true },\n    zIndexBase: { type: [String, Number], default: 1000 },\n    zIndex: { type: [Boolean, String, Number], default: false },\n    focusRetain: { type: Boolean, default: true },\n    focusTrap: { type: Boolean, default: false },\n    fitParent: { type: Boolean, default: true },\n    drag: { type: Boolean, default: false },\n    dragSelector: { type: String, default: '' },\n    keepChangedStyle: { type: Boolean, default: false },\n    resize: {\n      type: Boolean,\n      default: false\n    },\n    resizeDirections: {\n      type: Array,\n      default: () => ['t', 'tr', 'r', 'br', 'b', 'bl', 'l', 'tl'],\n      validator: val =>\n        ['t', 'tr', 'r', 'br', 'b', 'bl', 'l', 'tl'].filter(value => val.indexOf(value) !== -1).length === val.length\n    },\n    minWidth: { type: Number, default: 0 },\n    minHeight: { type: Number, default: 0 },\n    maxWidth: { type: Number, default: Infinity },\n    maxHeight: { type: Number, default: Infinity }\n  },\n  data: () => ({\n    modalStackIndex: null,\n    visible: false,\n    visibility: {\n      modal: false,\n      overlay: false,\n      resize: false\n    },\n    overlayTransitionState: null,\n    modalTransitionState: null,\n    stopEvent: false,\n    params: {},\n    dragResizeStyle: {},\n    resolveToggle: noop,\n    rejectToggle: noop,\n    state: null,\n    lastMousedownEl: null\n  }),\n  computed: {\n    isComponentReadyToBeDestroyed() {\n      return (\n        (this.hideOverlay || this.overlayTransitionState === TransitionState.Leave) &&\n        this.modalTransitionState === TransitionState.Leave\n      )\n    },\n    calculateZIndex() {\n      if (this.zIndex === false) {\n        if (this.zIndexAuto) {\n          return +this.zIndexBase + 2 * (this.modalStackIndex || 0)\n        } else {\n          return false\n        }\n      } else {\n        return this.zIndex\n      }\n    },\n    bindStyle() {\n      return {\n        ...(this.calculateZIndex !== false && { zIndex: this.calculateZIndex })\n      }\n    },\n    bindContentStyle() {\n      let style = [this.dragResizeStyle]\n      Array.isArray(this.contentStyle) ? style.push(...this.contentStyle) : style.push(this.contentStyle)\n      return style\n    },\n    computedTransition() {\n      if (typeof this.transition === 'string') return { name: this.transition }\n      return { ...this.transition }\n    },\n    computedOverlayTransition() {\n      if (typeof this.overlayTransition === 'string') return { name: this.overlayTransition }\n      return { ...this.overlayTransition }\n    }\n  },\n  watch: {\n    value(value) {\n      if (this.stopEvent) {\n        this.stopEvent = false\n        return\n      }\n      this.mounted()\n      if (!value) {\n        if (this.emitEvent('before-close', true)) {\n          this.rejectToggle('hide')\n          return\n        }\n        this.close()\n      }\n    },\n    lockScroll: 'handleLockScroll',\n    hideOverlay(value) {\n      if (this.value && !value) {\n        this.visibility.overlay = true\n      }\n    },\n    attach: 'mounted',\n    isComponentReadyToBeDestroyed(isReady) {\n      if (isReady) {\n        this.visible = false\n      }\n    },\n    drag(value) {\n      if (this.visible) {\n        value ? this.addDragDown() : this.removeDragDown()\n      }\n    },\n    resize(value) {\n      if (this.visible) {\n        value ? this.addResizeDown() : this.removeResizeDown()\n      }\n    },\n    keepChangedStyle(value) {\n      if (!value) {\n        this.dragResizeStyle = {}\n      }\n    }\n  },\n  created() {\n    this.api.modals.push(this)\n  },\n  mounted() {\n    this.$focusTrap = new FocusTrap()\n    this.mounted()\n  },\n  beforeDestroy() {\n    this.close()\n    this.lockScroll && this.$refs.vfmContainer && enableBodyScroll(this.$refs.vfmContainer)\n    this?.$el?.remove()\n\n    let index = this.api.modals.findIndex(vm => vm === this)\n    this.api.modals.splice(index, 1)\n  },\n  methods: {\n    mounted() {\n      if (this.value) {\n        if (this.emitEvent('before-open', false)) {\n          this.rejectToggle('show')\n          return\n        }\n        let target = this.getAttachElement()\n        if (target || this.attach === false) {\n          this.attach !== false && target.appendChild(this.$el)\n\n          let index = this.api.openedModals.findIndex(vm => vm === this)\n          if (index !== -1) {\n            // if this is already exist in modalStack, delete it\n            this.api.openedModals.splice(index, 1)\n          }\n          this.api.openedModals.push(this)\n\n          this.modalStackIndex = this.api.openedModals.length - 1\n\n          this.handleLockScroll()\n          this.api.openedModals\n            .filter(vm => vm !== this)\n            .forEach((vm, index) => {\n              if (vm.getAttachElement() === target) {\n                // if vm and this have the same attach element\n                vm.modalStackIndex = index\n                vm.visibility.overlay = false\n              }\n            })\n\n          this.visible = true\n          this.$nextTick(() => {\n            this.startTransitionEnter()\n          })\n        } else if (target !== false) {\n          console.warn('Unable to locate target '.concat(this.attach))\n        }\n      }\n    },\n    close() {\n      let index = this.api.openedModals.findIndex(vm => vm === this)\n      if (index !== -1) {\n        // remove this in modalStack\n        this.api.openedModals.splice(index, 1)\n      }\n      if (this.api.openedModals.length > 0) {\n        // If there are still nested modals opened\n        const $_vm = this.api.openedModals[this.api.openedModals.length - 1]\n        if ($_vm.focusRetain || $_vm.focusTrap) {\n          $_vm.$refs.vfmContainer.focus()\n        }\n        !$_vm.hideOverlay && ($_vm.visibility.overlay = true)\n      }\n      this.drag && this.removeDragDown()\n      this.resize && this.removeResizeDown()\n      this.state = null\n\n      this.startTransitionLeave()\n    },\n    startTransitionEnter() {\n      this.visibility.overlay = true\n      this.visibility.modal = true\n    },\n    startTransitionLeave() {\n      this.visibility.overlay = false\n      this.visibility.modal = false\n    },\n    handleLockScroll() {\n      if (this.value) {\n        this.$nextTick(() => {\n          if (this.lockScroll) {\n            disableBodyScroll(this.$refs.vfmContainer, {\n              reserveScrollBarGap: true\n            })\n          } else {\n            enableBodyScroll(this.$refs.vfmContainer)\n          }\n        })\n      }\n    },\n    getAttachElement() {\n      let target\n      if (this.attach === false) {\n        target = false\n      } else if (typeof this.attach === 'string') {\n        // CSS selector\n        if (window) {\n          target = window.document.querySelector(this.attach)\n        } else {\n          target = false\n        }\n      } else {\n        // DOM Element\n        target = this.attach\n      }\n      return target\n    },\n    beforeOverlayEnter() {\n      this.overlayTransitionState = TransitionState.Entering\n    },\n    afterOverlayEnter() {\n      this.overlayTransitionState = TransitionState.Enter\n    },\n    beforeOverlayLeave() {\n      this.overlayTransitionState = TransitionState.Leaving\n    },\n    afterOverlayLeave() {\n      this.overlayTransitionState = TransitionState.Leave\n    },\n    beforeModalEnter() {\n      this.modalTransitionState = TransitionState.Entering\n    },\n    afterModalEnter() {\n      this.modalTransitionState = TransitionState.Enter\n      if (this.focusRetain || this.focusTrap) {\n        this.$refs.vfmContainer.focus()\n      }\n      this.focusTrap && this.$focusTrap.enable(this.$refs.vfmContainer)\n      this.drag && this.addDragDown()\n      this.resize && this.addResizeDown()\n\n      this.$emit('opened', this.createModalEvent({ type: 'opened' }))\n      this.resolveToggle('show')\n    },\n    beforeModalLeave() {\n      this.modalTransitionState = TransitionState.Leaving\n\n      if (this.$focusTrap.enabled()) {\n        this.$focusTrap.disable()\n      }\n    },\n    afterModalLeave() {\n      this.modalTransitionState = TransitionState.Leave\n      this.modalStackIndex = null\n      this.lockScroll && enableBodyScroll(this.$refs.vfmContainer)\n      if (!this.keepChangedStyle) {\n        this.dragResizeStyle = {}\n      }\n\n      let stopEvent = false\n      const event = this.createModalEvent({\n        type: 'closed',\n        stop() {\n          stopEvent = true\n        }\n      })\n      this.$emit('closed', event)\n      this.resolveToggle('hide')\n      if (stopEvent) return\n      this.params = {}\n    },\n    onMousedown(e) {\n      this.lastMousedownEl = e?.target\n    },\n    onMouseupContainer() {\n      // skip when the lastMousedownEl didn't equal $refs.vfmContainer\n      if (this.lastMousedownEl !== this.$refs.vfmContainer) return\n      // skip when state equal 'resize:move'\n      if (this.state === 'resize:move') return\n      this.$emit('click-outside', this.createModalEvent({ type: 'click-outside' }))\n      this.clickToClose && this.$emit('input', false)\n    },\n    onEsc() {\n      if (this.visible && this.escToClose) {\n        this.$emit('input', false)\n      }\n    },\n    createModalEvent(eventProps = {}) {\n      return {\n        ref: this,\n        ...eventProps\n      }\n    },\n    emitEvent(eventType, value) {\n      let stopEvent = false\n      const event = this.createModalEvent({\n        type: eventType,\n        stop() {\n          stopEvent = true\n        }\n      })\n      this.$emit(eventType, event)\n      if (stopEvent) {\n        this.stopEvent = true\n        this.$emit('input', value)\n        return true\n      }\n      return false\n    },\n    emitState(e, state, action) {\n      this.state = `${state}:${action}`\n      this.$emit(this.state, e)\n    },\n    toggle(show, params) {\n      return new Promise((resolve, reject) => {\n        this.resolveToggle = res => {\n          resolve(res)\n          this.resolveToggle = noop\n        }\n        this.rejectToggle = err => {\n          reject(err)\n          this.rejectToggle = noop\n        }\n        const value = typeof show === 'boolean' ? show : !this.value\n        if (value && arguments.length === 2) {\n          this.params = params\n        }\n        this.$emit('input', value)\n      })\n    },\n    pointerDown(e) {\n      e.stopPropagation()\n      const STATE_RESIZE = 'resize'\n      const STATE_DRAG = 'drag'\n      const { vfmContainer, vfmContent } = this.$refs\n      const direction = e.target.getAttribute('direction')\n      let state\n      if (direction) {\n        state = STATE_RESIZE\n      } else if (validDragElement(e, vfmContent, this.dragSelector)) {\n        state = STATE_DRAG\n      } else {\n        return\n      }\n      this.emitState(e, state, 'start')\n      const down = getPosition(e)\n      const rectContainer = vfmContainer.getBoundingClientRect()\n      const rectContent = vfmContent.getBoundingClientRect()\n      const isAbsolute = window.getComputedStyle(vfmContent).position === 'absolute'\n      const position = {\n        top: trimPx(this.dragResizeStyle.top),\n        left: trimPx(this.dragResizeStyle.left)\n      }\n      const limit = (() => {\n        if (this.fitParent) {\n          const limit = {\n            absolute() {\n              return {\n                minTop: 0,\n                minLeft: 0,\n                maxTop: rectContainer.height - rectContent.height,\n                maxLeft: rectContainer.width - rectContent.width\n              }\n            },\n            relative() {\n              return {\n                minTop: position.top + rectContainer.top - rectContent.top,\n                minLeft: position.left + rectContainer.left - rectContent.left,\n                maxTop: position.top + rectContainer.bottom - rectContent.bottom,\n                maxLeft: position.left + rectContainer.right - rectContent.right\n              }\n            }\n          }\n          return isAbsolute ? limit.absolute() : limit.relative()\n        } else {\n          return {}\n        }\n      })()\n      const resetBodyCursor = state === STATE_RESIZE && setStyle(document.body, 'cursor', resizeCursor[direction])\n\n      const moving = e => {\n        // onPointerMove\n        e.stopPropagation()\n        this.emitState(e, state, 'move')\n        const move = getPosition(e)\n        let offset = {\n          x: move.x - down.x,\n          y: move.y - down.y\n        }\n        if (state === STATE_RESIZE) {\n          offset = this.getResizeOffset(direction, offset, rectContainer, rectContent, isAbsolute)\n        }\n\n        let top\n        let left\n        if (isAbsolute) {\n          top = rectContent.top - rectContainer.top + offset.y\n          left = rectContent.left - rectContainer.left + offset.x\n        } else {\n          top = position.top + offset.y\n          left = position.left + offset.x\n        }\n        if (state === STATE_DRAG && this.fitParent) {\n          top = clamp(limit.minTop, top, limit.maxTop)\n          left = clamp(limit.minLeft, left, limit.maxLeft)\n        }\n        const style = {\n          position: 'relative',\n          top: top + 'px',\n          left: left + 'px',\n          margin: 'unset',\n          touchAction: 'none',\n          ...(isAbsolute && {\n            position: 'absolute',\n            transform: 'unset',\n            width: rectContent.width + 'px',\n            height: rectContent.height + 'px'\n          }),\n          ...(offset.width && { width: offset.width + 'px' }),\n          ...(offset.height && { height: offset.height + 'px' })\n        }\n\n        this.dragResizeStyle = {\n          ...this.dragResizeStyle,\n          ...style\n        }\n      }\n      const end = e => {\n        // onPointerUp\n        e.stopPropagation()\n        if (state === STATE_RESIZE) {\n          resetBodyCursor && resetBodyCursor()\n        }\n        // Excute onClickContainer before trigger emitState\n        setTimeout(() => {\n          this.emitState(e, state, 'end')\n        })\n        removeListener('move', document, moving)\n        removeListener('up', document, end)\n      }\n      addListener('move', document, moving)\n      addListener('up', document, end)\n    },\n    addDragDown() {\n      addListener('down', this.$refs.vfmContent, this.pointerDown)\n      this.dragResizeStyle.touchAction = 'none'\n    },\n    removeDragDown() {\n      removeListener('down', this.$refs.vfmContent, this.pointerDown)\n    },\n    addResizeDown() {\n      this.visibility.resize = true\n      this.$nextTick(() => {\n        addListener('down', this.$refs.vfmResize, this.pointerDown)\n      })\n    },\n    removeResizeDown() {\n      removeListener('down', this.$refs.vfmResize, this.pointerDown)\n      this.visibility.resize = false\n    },\n    getResizeOffset(direction, offset, rectContainer, rectContent, isAbsolute) {\n      const setOffset = dir => {\n        let offsetAxis = offset[dir.axis]\n        offsetAxis = this.fitParent ? clamp(dir.min, offsetAxis, dir.max) : offsetAxis\n        let edge = clamp(dir.minEdge, dir.getEdge(offsetAxis), dir.maxEdge)\n        offsetAxis = dir.getOffsetAxis(edge, isAbsolute)\n        return {\n          [dir.edgeName]: edge,\n          [dir.axis]: offsetAxis\n        }\n      }\n\n      const getDirectionInfo = (position, edgeName, axis, isPositive) => {\n        const rectContentEdge = rectContent[edgeName]\n        const positionOffset = rectContainer[position] - rectContent[position]\n        const EdgeName = capitalize(edgeName)\n        return {\n          axis,\n          edgeName,\n          min: isPositive ? positionOffset : -rectContentEdge,\n          max: isPositive ? rectContentEdge : positionOffset,\n          minEdge: this[`min${EdgeName}`],\n          maxEdge: this[`max${EdgeName}`],\n          getEdge: offsetAxis => rectContent[edgeName] - offsetAxis * (isPositive ? 1 : -1),\n          getOffsetAxis: (edge, isAbsolute) => {\n            const offsetAxis = rectContent[edgeName] - edge\n            if (isAbsolute) {\n              return isPositive ? offsetAxis : 0\n            } else {\n              return ((isPositive ? 1 : -1) * offsetAxis) / 2\n            }\n          }\n        }\n      }\n\n      const directions = {\n        t: ['top', 'height', 'y', true],\n        b: ['bottom', 'height', 'y', false],\n        l: ['left', 'width', 'x', true],\n        r: ['right', 'width', 'x', false]\n      }\n\n      let _offset = { x: 0, y: 0 }\n      direction.split('').forEach(dir => {\n        const directionInfo = getDirectionInfo(...directions[dir])\n        _offset = {\n          ..._offset,\n          ...setOffset(directionInfo)\n        }\n      })\n      return _offset\n    }\n  }\n}\n</script>\n\n<style lang=\"css\" scoped>\n.vfm--fixed {\n  position: fixed;\n}\n.vfm--absolute {\n  position: absolute;\n}\n.vfm--inset {\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n}\n.vfm--overlay {\n  background-color: rgba(0, 0, 0, 0.5);\n}\n.vfm--prevent-none {\n  pointer-events: none;\n}\n.vfm--prevent-auto {\n  pointer-events: auto;\n}\n.vfm--outline-none:focus {\n  outline: none;\n}\n.vfm-enter-active,\n.vfm-leave-active {\n  transition: opacity 0.2s;\n}\n.vfm-enter,\n.vfm-leave-to {\n  opacity: 0;\n}\n\n.vfm--touch-none {\n  touch-action: none;\n}\n.vfm--select-none {\n  user-select: none;\n}\n\n.vfm--resize-tr,\n.vfm--resize-br,\n.vfm--resize-bl,\n.vfm--resize-tl {\n  width: 12px;\n  height: 12px;\n  z-index: 10;\n}\n\n.vfm--resize-t {\n  top: -6px;\n  left: 0;\n  width: 100%;\n  height: 12px;\n  cursor: ns-resize;\n}\n.vfm--resize-tr {\n  top: -6px;\n  right: -6px;\n  cursor: nesw-resize;\n}\n.vfm--resize-r {\n  top: 0;\n  right: -6px;\n  width: 12px;\n  height: 100%;\n  cursor: ew-resize;\n}\n.vfm--resize-br {\n  bottom: -6px;\n  right: -6px;\n  cursor: nwse-resize;\n}\n.vfm--resize-b {\n  bottom: -6px;\n  left: 0;\n  width: 100%;\n  height: 12px;\n  cursor: ns-resize;\n}\n.vfm--resize-bl {\n  bottom: -6px;\n  left: -6px;\n  cursor: nesw-resize;\n}\n.vfm--resize-l {\n  top: 0;\n  left: -6px;\n  width: 12px;\n  height: 100%;\n  cursor: ew-resize;\n}\n.vfm--resize-tl {\n  top: -6px;\n  left: -6px;\n  cursor: nwse-resize;\n}\n</style>\n","import Vue from 'vue'\nimport VModal from './VModal.vue'\nimport VDynamicModals from './VDynamicModals.vue'\n\nexport function createApi() {\n  let _modalComponent = null\n\n  return Vue.observable({\n    show(modal, ...args) {\n      switch (typeof modal) {\n        case 'string':\n          return this.toggle(modal, true, ...args)\n        case 'object': {\n          return Promise.allSettled([\n            new Promise((resolve, reject) => {\n              const defaultModal = {\n                value: true,\n                id: Symbol('dynamicModal'),\n                component: _modalComponent,\n                bind: {},\n                slots: {},\n                on: {},\n                params: args[0],\n                reject,\n                opened() {\n                  resolve('show')\n                }\n              }\n              this.dynamicModals.push(Object.assign(defaultModal, modal))\n            })\n          ])\n        }\n      }\n    },\n    hide(...names) {\n      return this.toggle(names, false)\n    },\n    hideAll() {\n      return this.hide(...this.openedModals.map(modal => modal.name))\n    },\n    toggle(name, ...args) {\n      const modals = Array.isArray(name) ? this.get(...name) : this.get(name)\n      return Promise.allSettled(modals.map(modal => modal.toggle(...args)))\n    },\n    get(...names) {\n      return this.modals.filter(modal => names.includes(modal.name))\n    },\n    dynamicModals: [],\n    openedModals: [],\n    modals: [],\n    _setDefaultModal(modalComponent) {\n      _modalComponent = modalComponent\n    }\n  })\n}\n\nexport function bindApi(component, api) {\n  const _component = { ...component, props: { ...component.props } }\n  Object.assign(_component.props, {\n    api: { type: Object, default: () => api }\n  })\n  return _component\n}\n\nexport function createModal(api) {\n  const modalComponent = bindApi(VModal, api)\n  api._setDefaultModal(modalComponent)\n  return modalComponent\n}\n\nexport function createContainer(api) {\n  return bindApi(VDynamicModals, api)\n}\n","import { createApi, createModal, createContainer } from './PluginCore'\n\n/**\n * @description Ensure that `_vfm` is used when function `installPlugin` is executed for the first time\n */\nlet _count = 0\n\nconst _key = '$modal'\nconst _name = 'VModal'\nconst _containerName = 'VDynamicModals'\n\n/**\n * @description Support create multiple vfm instance\n */\nexport const createVfm = () => {\n  let api = createApi()\n  return {\n    [_key]: api,\n    [_name]: createModal(api),\n    [_containerName]: createContainer(api)\n  }\n}\n\n/**\n * @description Create a vfm instance by default for directly support `import { $modal, VModal, VDynamicModals } from 'vue-final-modal'`\n */\nconst _vfm = createVfm()\nexport const { $modal, VModal, VDynamicModals } = _vfm\n\n/**\n * @description Register vfm instance globally\n */\nexport const installVfm = (Vue, options = {}) => {\n  const { $modal, VModal, VDynamicModals } = _count === 0 ? _vfm : createVfm()\n  _count += 1\n  const key = options[_key] || _key\n  const name = options[_name] || _name\n  const containerName = options[_containerName] || _containerName\n  Vue.prototype[key] = $modal\n  Vue.component(name, VModal)\n  Vue.component(containerName, VDynamicModals)\n}\n\n/**\n * @description Vue plugin for register vfm instance globally\n */\nexport const vfmPlugin = pluginOptions => ({\n  install(Vue, options) {\n    const _options = Object.assign({}, pluginOptions, options)\n    installVfm(Vue, _options)\n  }\n})\n\nvfmPlugin.install = installVfm\n"],"names":["queryFocusableElements","element","selector","querySelectorAll","isFocused","document","activeElement","FocusTrap","root","elements","onKeyDown","this","bind","enable","disable","firstElement","lastElement","length","event","key","keyCode","isTabPressed","shiftKey","focus","preventDefault","addEventListener","removeEventListener","getPosition","e","targetTouches","x","clientX","y","clientY","clamp","min","num","max","Math","trimPx","distance","Number","replace","pointerType","down","pc","m","move","up","addListener","type","el","callback","passive","removeListener","hasPassiveEvents","window","passiveTestOptions","previousBodyOverflowSetting","previousBodyPaddingRight","isIosDevice","navigator","platform","test","maxTouchPoints","locks","documentListenerAdded","initialClientY","hasAnyScrollableEl","delta","path","push","classList","contains","parentElement","composedPath","forEach","nodeType","Node","ELEMENT_NODE","style","getComputedStyle","includes","overflowY","scrollHeight","clientHeight","hasScrollbar","scrollTop","shouldScroll","allowTouchMove","some","rawEvent","target","touches","disableBodyScroll","targetElement","options","lock","ontouchstart","ontouchmove","isTargetElementTotallyScrolled","stopPropagation","handleScroll","undefined","reserveScrollBarGap","scrollBarGap","innerWidth","documentElement","clientWidth","computedBodyPaddingRight","parseInt","body","getPropertyValue","paddingRight","overflow","setOverflowHidden","console","error","enableBodyScroll","filter","dragSelector","value","cacheStyle","s","charAt","toUpperCase","slice","bindApi","component","api","_component","props","Object","assign","_count","_key","_name","_containerName","createVfm","_modalComponent","Vue","observable","show","modal","args","toggle","Promise","allSettled","resolve","reject","defaultModal","id","Symbol","slots","on","params","opened","_this","dynamicModals","hide","names","hideAll","openedModals","map","name","modals","Array","isArray","get","_setDefaultModal","modalComponent","VModal","createModal","VDynamicModals","createContainer","_vfm","$modal","installVfm","containerName","prototype","vfmPlugin","pluginOptions","install","_options"],"mappings":"ipEAEA,IAsBMA,EAAyB,SAAAC,UAJN,SAACA,EAASC,YACrBD,EAAQE,iBAAiBD,IAAa,IAI3CC,CAAiBF,EAtBxB,qWAyBIG,EAAY,SAAAH,UACTA,GAAWI,SAASC,eAOvBC,qIAEGC,KAAO,UACPC,SAAW,QAEXC,UAAYC,KAAKD,UAAUE,KAAKD,WAChCE,OAASF,KAAKE,OAAOD,KAAKD,WAC1BG,QAAUH,KAAKG,QAAQF,KAAKD,WAC5BI,aAAeJ,KAAKI,aAAaH,KAAKD,WACtCK,YAAcL,KAAKK,YAAYJ,KAAKD,wDAG3C,kBACSA,KAAKF,SAASE,KAAKF,SAASQ,OAAS,IAAM,iCAGpD,kBACSN,KAAKF,SAAS,IAAM,8BAG7B,SAAUS,MAxCS,SAAAA,SACE,QAAdA,EAAMC,KAAmC,IAAlBD,EAAME,QAwC7BC,CAAaH,QAKdA,EAAMI,gBA7BJjB,SAASC,eAsCWF,EAAUO,KAAKK,qBAClCD,eAAeQ,aACpBL,EAAMM,yBAVFpB,EAAUO,KAAKI,uBACZC,cAAcO,QACnBL,EAAMM,0CAaZ,mBACWb,KAAKH,2BAGhB,SAAOA,GACAA,SAIAA,KAAOA,OACPC,SAAWT,EAAuBW,KAAKH,WAEvCA,KAAKiB,iBAAiB,UAAWd,KAAKD,mCAG7C,gBACOF,KAAKkB,oBAAoB,UAAWf,KAAKD,gBACzCF,KAAO,0CCvFHmB,EAAc,SAAAC,SACUA,EAAEC,cAAgBD,EAAEC,cAAc,GAAKD,QACnE,CAAEE,IADDC,QACIC,IADQC,UAQTC,EAAQ,SAACC,EAAKC,EAAKC,SACX,iBAARF,IACTA,EAAMG,KAAKH,IAAIC,EAAKC,IAAQD,GAEX,iBAARC,IACTA,EAAMC,KAAKD,IAAID,EAAKD,IAEfG,KAAKH,IAAIG,KAAKD,IAAID,EAAKD,GAAME,IAGzBE,EAAS,SAAAC,UACZA,GAAYC,OAAOD,EAASE,QAAQ,MAAO,MAAS,GASxDC,EAAc,CAClBC,KAAM,CACJC,GAAI,YACJC,EAAG,cAELC,KAAM,CACJF,GAAI,YACJC,EAAG,aAELE,GAAI,CACFH,GAAI,UACJC,EAAG,aAGMG,EAAc,SAACC,EAAMC,EAAIC,GACpCD,GAAMA,EAAG1B,iBAAiBkB,EAAYO,GAAML,GAAIO,GAChDD,GAAMA,EAAG1B,iBAAiBkB,EAAYO,GAAMJ,EAAGM,EAAU,CAAEC,SAAS,KAEzDC,EAAiB,SAACJ,EAAMC,EAAIC,GACvCD,GAAMA,EAAGzB,oBAAoBiB,EAAYO,GAAML,GAAIO,GACnDD,GAAMA,EAAGzB,oBAAoBiB,EAAYO,GAAMJ,EAAGM,ICtDhDG,GAAmB,EACvB,GAAsB,oBAAXC,OAAwB,KAC3BC,EAAqB,eAEvBF,GAAmB,IAIvBC,OAAO/B,iBAAiB,cAAe,KAAMgC,GAC7CD,OAAO9B,oBAAoB,cAAe,KAAM+B,GAGlD,IAWIC,EACAC,EAZEC,EACc,oBAAXJ,QACPA,OAAOK,WACPL,OAAOK,UAAUC,WAChB,iBAAiBC,KAAKP,OAAOK,UAAUC,WACP,aAA9BN,OAAOK,UAAUC,UAA2BN,OAAOK,UAAUG,eAAiB,GAE/EC,EAAQ,GACRC,GAAwB,EACxBjC,EAAU,EACVkC,GAAkB,EA2BhBC,EAAqB,SAACjB,EAAIkB,OAC1BD,GAAqB,SAXN,SAAAjB,WACbmB,EAAO,GACNnB,GAAI,IACTmB,EAAKC,KAAKpB,GACNA,EAAGqB,UAAUC,SAAS,OAAQ,OAAOH,EACzCnB,EAAKA,EAAGuB,qBAEHJ,EAKMK,CAAaxB,GACrByB,SAAQ,SAAAzB,IA1BM,SAAAA,OACdA,GAAMA,EAAG0B,WAAaC,KAAKC,aAAc,OAAO,MAE/CC,EAAQxB,OAAOyB,iBAAiB9B,SAC/B,CAAC,OAAQ,UAAU+B,SAASF,EAAMG,YAAchC,EAAGiC,aAAejC,EAAGkC,cAuBtEC,CAAanC,IApBA,SAACA,EAAIkB,WACH,IAAjBlB,EAAGoC,WAAmBlB,EAAQ,GAC9BlB,EAAGoC,UAAYpC,EAAGkC,aAAehB,GAASlB,EAAGiC,cAAgBf,EAAQ,GAkB/CmB,CAAarC,EAAIkB,KACvCD,GAAqB,MAGlBA,GAIHqB,EAAiB,SAAAtC,UAAMc,EAAMyB,MAAK,kBAAMtB,EAAmBjB,GAAKlB,OAEhET,EAAiB,SAAAmE,OACf/D,EAAI+D,GAAYnC,OAAOtC,cAMzBuE,EAAe7D,EAAEgE,UAIjBhE,EAAEiE,QAAQ5E,OAAS,IAEnBW,EAAEJ,gBAAgBI,EAAEJ,kBAEjB,KAgEIsE,EAAoB,SAACC,EAAeC,MAE1CD,OASD9B,EAAMyB,MAAK,SAAAO,UAAQA,EAAKF,gBAAkBA,UAIxCE,EAAO,CACXF,cAAAA,EACAC,QAASA,GAAW,IAGtB/B,cAAYA,IAAOgC,IAEfrC,GACFmC,EAAcG,aAAe,SAAAhF,GACQ,IAA/BA,EAAMW,cAAcZ,SAEtBkD,EAAiBjD,EAAMW,cAAc,GAAGI,UAG5C8D,EAAcI,YAAc,SAAAjF,GACS,IAA/BA,EAAMW,cAAcZ,QAnDT,SAACC,EAAO6E,GAC3B9D,EAAUf,EAAMW,cAAc,GAAGI,QAAUkC,GAEvCsB,EAAevE,EAAM0E,UAIrBG,GAA6C,IAA5BA,EAAcR,WAAmBtD,EAAU,GAV3B,SAAA8D,WACrCA,GAAgBA,EAAcX,aAAeW,EAAcR,WAAaQ,EAAcV,aAclFe,CAA+BL,IAAkB9D,EAAU,EAHtDT,EAAeN,GAQxBA,EAAMmF,mBAoCAC,CAAapF,EAAO6E,IAInB7B,IACH7D,SAASoB,iBAAiB,YAAaD,EAAgB+B,EAAmB,CAAEF,SAAS,QAAUkD,GAC/FrC,GAAwB,IAnGJ,SAAA8B,WAESO,IAA7B5C,EAAwC,KACpC6C,IAAwBR,IAA2C,IAAhCA,EAAQQ,oBAC3CC,EAAejD,OAAOkD,WAAarG,SAASsG,gBAAgBC,eAE9DJ,GAAuBC,EAAe,EAAG,KACrCI,EAA2BC,SAAS7B,iBAAiB5E,SAAS0G,MAAMC,iBAAiB,iBAAkB,IAC7GrD,EAA2BtD,SAAS0G,KAAK/B,MAAMiC,aAC/C5G,SAAS0G,KAAK/B,MAAMiC,uBAAkBJ,EAA2BJ,cAIjCF,IAAhC7C,IACFA,EAA8BrD,SAAS0G,KAAK/B,MAAMkC,SAClD7G,SAAS0G,KAAK/B,MAAMkC,SAAW,UAuF/BC,CAAkBnB,SArClBoB,QAAQC,MACN,mHAwCOC,EAAmB,SAAAvB,GACzBA,GAQL9B,EAAQA,EAAMsD,QAAO,SAAAtB,UAAQA,EAAKF,gBAAkBA,KAEhDnC,GACFmC,EAAcG,aAAe,KAC7BH,EAAcI,YAAc,KAExBjC,GAA0C,IAAjBD,EAAMhD,SACjCZ,SAASqB,oBAAoB,YAAaF,EAAgB+B,EAAmB,CAAEF,SAAS,QAAUkD,GAClGrC,GAAwB,IAEhBD,EAAMhD,cAzGesF,IAA7B5C,IACFtD,SAAS0G,KAAK/B,MAAMiC,aAAetD,EAInCA,OAA2B4C,QAGOA,IAAhC7C,IACFrD,SAAS0G,KAAK/B,MAAMkC,SAAWxD,EAI/BA,OAA8B6C,KA4E9Ba,QAAQC,MACN,4KC3FN,+nBARA,+sNFhEgC,SAACzF,EAAGuB,EAAIqE,SACjB,KAAjBA,KACarE,EAAGhD,iBAAiBqH,IACzBtC,SAAStD,EAAEgE,2EAlCAzC,EAAIhC,EAAKsG,EAC1BC,+eADiBvE,gBAAIhC,WAAKsG,OAC1BC,EAAavE,EAAG6B,MAAM7D,GAC5BgC,EAAG6B,MAAM7D,GAAOsG,EACT,WACLtE,EAAG6B,MAAM7D,GAAOuG,wtCASMC,wBAAAA,KACfC,OAAO,GAAGC,cAAgBF,EAAEG,MAAM,ouOG0CtC,SAASC,EAAQC,EAAWC,OAC3BC,SAAkBF,OAAWG,WAAYH,EAAUG,gBACzDC,OAAOC,OAAOH,EAAWC,MAAO,CAC9BF,IAAK,CAAE/E,KAAMkF,eAAiB,kBAAMH,MAE/BC,ECxDT,IAAII,EAAS,EAEPC,EAAO,SACPC,EAAQ,SACRC,EAAiB,iBAKVC,GAAY,iBDTnBC,ECUAV,GDVAU,EAAkB,KAEfC,UAAIC,WAAW,CACpBC,cAAKC,qCAAUC,mCAAAA,6BACED,QACR,gBACIpI,KAAKsI,mBAAOF,GAAO,UAASC,QAChC,gBACIE,QAAQC,WAAW,CACxB,IAAID,SAAQ,SAACE,EAASC,OACdC,EAAe,CACnB7B,OAAO,EACP8B,GAAIC,OAAO,gBACXxB,UAAWW,EACX/H,KAAM,GACN6I,MAAO,GACPC,GAAI,GACJC,OAAQX,EAAK,GACbK,OAAAA,EACAO,kBACER,EAAQ,UAGZS,EAAKC,cAAcvF,KAAK6D,OAAOC,OAAOiB,EAAcP,WAM9DgB,2CAAQC,2BAAAA,yBACCrJ,KAAKsI,OAAOe,GAAO,IAE5BC,0BACStJ,KAAKoJ,kBAAQpJ,KAAKuJ,aAAaC,KAAI,SAAApB,UAASA,EAAMqB,WAE3DnB,gBAAOmB,8BAASpB,mCAAAA,wBACRqB,EAASC,MAAMC,QAAQH,GAAQzJ,KAAK6J,iBAAOJ,IAAQzJ,KAAK6J,IAAIJ,UAC3DlB,QAAQC,WAAWkB,EAAOF,KAAI,SAAApB,UAASA,EAAME,aAANF,EAAgBC,QAEhEwB,0CAAOR,2BAAAA,yBACErJ,KAAK0J,OAAO9C,QAAO,SAAAwB,UAASiB,EAAM9E,SAAS6D,EAAMqB,UAE1DN,cAAe,GACfI,aAAc,GACdG,OAAQ,GACRI,0BAAiBC,GACf/B,EAAkB+B,oBClCnBnC,EAAON,OACPO,ED8CE,SAAqBP,OACpByC,EAAiB3C,EAAQ4C,EAAQ1C,UACvCA,EAAIwC,iBAAiBC,GACdA,ECjDIE,CAAY3C,QACpBQ,EDmDE,SAAyBR,UACvBF,EAAQ8C,EAAgB5C,GCpDX6C,CAAgB7C,OAOhC8C,GAAOrC,KACEsC,GAAmCD,GAAnCC,OAAQL,GAA2BI,GAA3BJ,OAAQE,GAAmBE,GAAnBF,eAKlBI,GAAa,SAACrC,OAAK5C,yDAAU,KACc,IAAXsC,EAAeyC,GAAOrC,KAAzDsC,IAAAA,OAAQL,IAAAA,OAAQE,IAAAA,eACxBvC,GAAU,MACJnH,EAAM6E,EAAQuC,IAASA,EACvB6B,EAAOpE,EAAO,QAAWwC,EACzB0C,EAAgBlF,EAAO,gBAAoByC,EACjDG,EAAIuC,UAAUhK,GAAO6J,EACrBpC,EAAIZ,UAAUoC,EAAMO,GACpB/B,EAAIZ,UAAUkD,EAAeL,IAMlBO,GAAY,SAAAC,SAAkB,CACzCC,iBAAQ1C,EAAK5C,OACLuF,EAAWnD,OAAOC,OAAO,GAAIgD,EAAerF,GAClDiF,GAAWrC,EAAK2C,MAIpBH,GAAUE,QAAUL"}
\ No newline at end of file
diff --git a/docs/components/examples/basic/BasicOptions.vue b/docs/components/examples/basic/BasicOptions.vue
index 796e21c9..26dbd3cb 100644
--- a/docs/components/examples/basic/BasicOptions.vue
+++ b/docs/components/examples/basic/BasicOptions.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="pb-8">
-    <v-modal
+    <custom-modal
       v-model="showModal"
       :ssr="ssr"
       :lock-scroll="lockScroll"
@@ -31,7 +31,7 @@
     >
       <template v-slot:title># Hello, world!</template>
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
-    </v-modal>
+    </custom-modal>
 
     <div class="flex space-x-2">
       <v-button highlight @click="showModal = true">Open Modal</v-button>
diff --git a/docs/components/examples/basic/VAccessibility.vue b/docs/components/examples/basic/VAccessibility.vue
index 0574e2fc..94da8074 100644
--- a/docs/components/examples/basic/VAccessibility.vue
+++ b/docs/components/examples/basic/VAccessibility.vue
@@ -1,9 +1,9 @@
 <template>
   <div>
-    <v-modal v-model="show" @confirm="show = false" @cancel="show = false" focus-trap>
+    <custom-modal v-model="show" @confirm="show = false" @cancel="show = false" focus-trap>
       <template v-slot:title>Hello, vue-final-modal</template>
       <p>Vue Final Modal is a renderless, stackable, detachable and lightweight modal component.</p>
-    </v-modal>
+    </custom-modal>
 
     <v-button highlight @click="show = true">Open modal</v-button>
   </div>
diff --git a/docs/components/examples/basic/VActionButtons.vue b/docs/components/examples/basic/VActionButtons.vue
index 0048f7d8..b412047c 100644
--- a/docs/components/examples/basic/VActionButtons.vue
+++ b/docs/components/examples/basic/VActionButtons.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <vue-final-modal v-model="showModal" classes="modal-container" content-class="modal-content">
+    <v-modal v-model="showModal" classes="modal-container" content-class="modal-content">
       <button class="modal__close" @click="showModal = false">
         <mdi-close></mdi-close>
       </button>
@@ -14,7 +14,7 @@
         <v-button @click="showModal = false">confirm</v-button>
         <v-button @click="showModal = false">cancel</v-button>
       </div>
-    </vue-final-modal>
+    </v-modal>
     <v-button highlight @click="showModal = true">Open modal</v-button>
   </div>
 </template>
diff --git a/docs/components/examples/basic/VApiShow.vue b/docs/components/examples/basic/VApiShow.vue
index 000081ad..543b2249 100644
--- a/docs/components/examples/basic/VApiShow.vue
+++ b/docs/components/examples/basic/VApiShow.vue
@@ -1,10 +1,10 @@
 <template>
   <div>
-    <v-modal v-model="showModal" name="VApiShow" @confirm="showModal = false" @cancel="showModal = false">
+    <custom-modal v-model="showModal" name="VApiShow" @confirm="showModal = false" @cancel="showModal = false">
       <template v-slot="{ params }">Hi {{ params.userName }} </template>
-      <template v-slot:title>$vfm.show</template>
-    </v-modal>
-    <v-button highlight @click="$vfm.show('VApiShow', { userName: 'vue-final-modal' })">Open modal</v-button>
+      <template v-slot:title>$modal.show</template>
+    </custom-modal>
+    <v-button highlight @click="$modal.show('VApiShow', { userName: 'vue-final-modal' })">Open modal</v-button>
   </div>
 </template>
 
diff --git a/docs/components/examples/basic/VBackground.vue b/docs/components/examples/basic/VBackground.vue
index 028d701a..3e423a1e 100644
--- a/docs/components/examples/basic/VBackground.vue
+++ b/docs/components/examples/basic/VBackground.vue
@@ -1,8 +1,8 @@
 <template>
   <div>
-    <vue-final-modal v-model="showModal" content-class="modal-content">
+    <v-modal v-model="showModal" content-class="modal-content">
       <span class="modal__title">Hello, vue-final-modal</span>
-    </vue-final-modal>
+    </v-modal>
     <v-button highlight @click="showModal = true">Open modal</v-button>
   </div>
 </template>
diff --git a/docs/components/examples/basic/VBasic.vue b/docs/components/examples/basic/VBasic.vue
index f2716c32..78195a2d 100644
--- a/docs/components/examples/basic/VBasic.vue
+++ b/docs/components/examples/basic/VBasic.vue
@@ -1,8 +1,8 @@
 <template>
   <div>
-    <vue-final-modal v-model="showModal">
+    <v-modal v-model="showModal">
       <span class="modal__title">Hello, vue-final-modal</span>
-    </vue-final-modal>
+    </v-modal>
     <v-button highlight @click="showModal = true">Open modal</v-button>
   </div>
 </template>
diff --git a/docs/components/examples/basic/VCentered.vue b/docs/components/examples/basic/VCentered.vue
index 7d1b660f..ce6623fb 100644
--- a/docs/components/examples/basic/VCentered.vue
+++ b/docs/components/examples/basic/VCentered.vue
@@ -1,8 +1,8 @@
 <template>
   <div>
-    <vue-final-modal v-model="showModal" classes="modal-container" content-class="modal-content">
+    <v-modal v-model="showModal" classes="modal-container" content-class="modal-content">
       <span class="modal__title">Hello, vue-final-modal</span>
-    </vue-final-modal>
+    </v-modal>
     <v-button highlight @click="showModal = true">Open modal</v-button>
   </div>
 </template>
diff --git a/docs/components/examples/basic/VCloseButton.vue b/docs/components/examples/basic/VCloseButton.vue
index dcec55ab..1f5a8a1e 100644
--- a/docs/components/examples/basic/VCloseButton.vue
+++ b/docs/components/examples/basic/VCloseButton.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <vue-final-modal v-model="showModal" classes="modal-container" content-class="modal-content">
+    <v-modal v-model="showModal" classes="modal-container" content-class="modal-content">
       <button class="modal__close" @click="showModal = false">
         <mdi-close></mdi-close>
       </button>
@@ -8,7 +8,7 @@
       <div class="modal__content">
         <p>Vue Final Modal is a renderless, stackable, detachable and lightweight modal component.</p>
       </div>
-    </vue-final-modal>
+    </v-modal>
     <v-button highlight @click="showModal = true">Open modal</v-button>
   </div>
 </template>
diff --git a/docs/components/examples/basic/VContent.vue b/docs/components/examples/basic/VContent.vue
index 98b23c29..f2a3d0d1 100644
--- a/docs/components/examples/basic/VContent.vue
+++ b/docs/components/examples/basic/VContent.vue
@@ -1,11 +1,11 @@
 <template>
   <div>
-    <vue-final-modal v-model="showModal" classes="modal-container" content-class="modal-content">
+    <v-modal v-model="showModal" classes="modal-container" content-class="modal-content">
       <span class="modal__title">Hello, vue-final-modal</span>
       <div class="modal__content">
         <p>Vue Final Modal is a renderless, stackable, detachable and lightweight modal component.</p>
       </div>
-    </vue-final-modal>
+    </v-modal>
     <v-button highlight @click="showModal = true">Open modal</v-button>
   </div>
 </template>
diff --git a/docs/components/examples/basic/VDynamic.vue b/docs/components/examples/basic/VDynamic.vue
index 7717fad6..1aa2cc25 100644
--- a/docs/components/examples/basic/VDynamic.vue
+++ b/docs/components/examples/basic/VDynamic.vue
@@ -6,7 +6,7 @@
 export default {
   methods: {
     dynamic() {
-      this.$vfm.show({
+      this.$modal.show({
         component: 'VDynamicModal'
       })
     }
diff --git a/docs/components/examples/basic/VDynamicAdvanced.vue b/docs/components/examples/basic/VDynamicAdvanced.vue
index dc8f665e..a08d8549 100644
--- a/docs/components/examples/basic/VDynamicAdvanced.vue
+++ b/docs/components/examples/basic/VDynamicAdvanced.vue
@@ -8,13 +8,13 @@ import VDescription from '../VDescription.vue'
 export default {
   methods: {
     dynamic() {
-      this.$vfm.show({
-        component: 'VModal',
+      this.$modal.show({
+        component: 'CustomModal',
         bind: {
           name: 'VDynamicAdvacedModal'
         },
         on: {
-          // event by v-modal
+          // event by custom-modal
           confirm(close) {
             console.log('confirm')
             close()
diff --git a/docs/components/examples/basic/VDynamicModal.vue b/docs/components/examples/basic/VDynamicModal.vue
index 5f26f4a6..9b26d80e 100644
--- a/docs/components/examples/basic/VDynamicModal.vue
+++ b/docs/components/examples/basic/VDynamicModal.vue
@@ -1,11 +1,5 @@
 <template>
-  <vue-final-modal
-    v-slot="{ close }"
-    v-bind="$attrs"
-    classes="modal-container"
-    content-class="modal-content"
-    v-on="$listeners"
-  >
+  <v-modal v-slot="{ close }" v-bind="$attrs" classes="modal-container" content-class="modal-content" v-on="$listeners">
     <button class="modal__close" @click="close">
       <mdi-close></mdi-close>
     </button>
@@ -13,7 +7,7 @@
     <div class="modal__content">
       <p>Vue Final Modal is a renderless, stackable, detachable and lightweight modal component.</p>
     </div>
-  </vue-final-modal>
+  </v-modal>
 </template>
 
 <script>
diff --git a/docs/components/examples/basic/VEvents.vue b/docs/components/examples/basic/VEvents.vue
index 887fa072..95994bc4 100644
--- a/docs/components/examples/basic/VEvents.vue
+++ b/docs/components/examples/basic/VEvents.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <v-modal
+    <custom-modal
       v-model="showModal"
       @click-outside="clickOutside"
       @before-open="beforeOpen"
@@ -10,7 +10,7 @@
       @cancel="showModal = false"
     >
       <template v-slot:title>Events Example!</template>
-    </v-modal>
+    </custom-modal>
     <v-button highlight @click="showModal = true">Open modal</v-button>
   </div>
 </template>
diff --git a/docs/components/examples/basic/VParams.vue b/docs/components/examples/basic/VParams.vue
index 17f71c06..d5fb0baf 100644
--- a/docs/components/examples/basic/VParams.vue
+++ b/docs/components/examples/basic/VParams.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <vue-final-modal
+    <v-modal
       v-model="showModal"
       name="stackable"
       classes="modal-container"
@@ -9,7 +9,7 @@
       @closed="e => e.stop()"
     >
       <template v-slot="{ params }">
-        <button class="modal__close" @click="$vfm.hide('stackable')">
+        <button class="modal__close" @click="$modal.hide('stackable')">
           <mdi-close></mdi-close>
         </button>
         <span class="modal__title">{{ params.test }} Hello, vue-final-modal</span>
@@ -19,15 +19,15 @@
           </p>
         </div>
         <div class="modal__action">
-          <v-button @click="$vfm.hide('stackable')">confirm</v-button>
-          <v-button @click="$vfm.hide('stackable')">cancel</v-button>
+          <v-button @click="$modal.hide('stackable')">confirm</v-button>
+          <v-button @click="$modal.hide('stackable')">cancel</v-button>
         </div>
       </template>
-    </vue-final-modal>
-    <v-button @click="$vfm.show('stackable', { test: 123 })">Show modal with params</v-button>
-    <v-button @click="$vfm.toggle('stackable', null, { test: 321 })">Toggle modal with params</v-button>
-    <v-button @click="$vfm.show('stackable')">Show modal</v-button>
-    <v-button @click="$vfm.hide('stackable')">Hide modal</v-button>
+    </v-modal>
+    <v-button @click="$modal.show('stackable', { test: 123 })">Show modal with params</v-button>
+    <v-button @click="$modal.toggle('stackable', null, { test: 321 })">Toggle modal with params</v-button>
+    <v-button @click="$modal.show('stackable')">Show modal</v-button>
+    <v-button @click="$modal.hide('stackable')">Hide modal</v-button>
   </div>
 </template>
 
diff --git a/docs/components/examples/basic/VScrollable.vue b/docs/components/examples/basic/VScrollable.vue
index e7a3a2f5..19de8c60 100644
--- a/docs/components/examples/basic/VScrollable.vue
+++ b/docs/components/examples/basic/VScrollable.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <vue-final-modal v-model="showModal" classes="modal-container" content-class="modal-content">
+    <v-modal v-model="showModal" classes="modal-container" content-class="modal-content">
       <button class="modal__close" @click="showModal = false">
         <mdi-close></mdi-close>
       </button>
@@ -10,7 +10,7 @@
           Vue Final Modal is a renderless, stackable, detachable and lightweight modal component.
         </p>
       </div>
-    </vue-final-modal>
+    </v-modal>
     <v-button highlight @click="showModal = true">Open modal</v-button>
   </div>
 </template>
diff --git a/docs/components/examples/basic/VStackable.vue b/docs/components/examples/basic/VStackable.vue
index b01344f3..2d76959e 100644
--- a/docs/components/examples/basic/VStackable.vue
+++ b/docs/components/examples/basic/VStackable.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <!-- First modal -->
-    <vue-final-modal v-model="showModal" classes="modal-container" content-class="modal-content">
+    <v-modal v-model="showModal" classes="modal-container" content-class="modal-content">
       <button class="modal__close" @click="showModal = false">
         <mdi-close></mdi-close>
       </button>
@@ -15,10 +15,10 @@
         <v-button highlight @click="showConfirmModal = true">confirm</v-button>
         <v-button @click="showModal = false">cancel</v-button>
       </div>
-    </vue-final-modal>
+    </v-modal>
 
     <!-- Second modal -->
-    <vue-final-modal v-model="showConfirmModal" classes="modal-container" content-class="modal-content">
+    <v-modal v-model="showConfirmModal" classes="modal-container" content-class="modal-content">
       <button class="modal__close" @click="showConfirmModal = false">
         <mdi-close></mdi-close>
       </button>
@@ -28,7 +28,7 @@
         <v-button @click="confirm">confirm</v-button>
         <v-button @click="showConfirmModal = false">cancel</v-button>
       </div>
-    </vue-final-modal>
+    </v-modal>
 
     <v-button highlight @click="showModal = true">Open modal</v-button>
   </div>
diff --git a/docs/components/examples/basic/VStopBeforeClose.vue b/docs/components/examples/basic/VStopBeforeClose.vue
index fee030ce..a359ecc8 100644
--- a/docs/components/examples/basic/VStopBeforeClose.vue
+++ b/docs/components/examples/basic/VStopBeforeClose.vue
@@ -1,11 +1,6 @@
 <template>
   <div>
-    <vue-final-modal
-      v-model="showModal"
-      classes="modal-container"
-      content-class="modal-content"
-      @before-close="e => e.stop()"
-    >
+    <v-modal v-model="showModal" classes="modal-container" content-class="modal-content" @before-close="e => e.stop()">
       <button class="modal__close" @click="showModal = false">
         <mdi-close></mdi-close>
       </button>
@@ -19,7 +14,7 @@
         <v-button @click="showModal = false">confirm</v-button>
         <v-button @click="showModal = false">cancel</v-button>
       </div>
-    </vue-final-modal>
+    </v-modal>
     <v-button highlight @click="showModal = true">Open modal</v-button>
   </div>
 </template>
diff --git a/docs/components/examples/basic/VStopBeforeOpen.vue b/docs/components/examples/basic/VStopBeforeOpen.vue
index 9febd256..3f28bacd 100644
--- a/docs/components/examples/basic/VStopBeforeOpen.vue
+++ b/docs/components/examples/basic/VStopBeforeOpen.vue
@@ -1,11 +1,6 @@
 <template>
   <div>
-    <vue-final-modal
-      v-model="showModal"
-      classes="modal-container"
-      content-class="modal-content"
-      @before-open="e => e.stop()"
-    >
+    <v-modal v-model="showModal" classes="modal-container" content-class="modal-content" @before-open="e => e.stop()">
       <button class="modal__close" @click="showModal = false">
         <mdi-close></mdi-close>
       </button>
@@ -19,7 +14,7 @@
         <v-button @click="showModal = false">confirm</v-button>
         <v-button @click="showModal = false">cancel</v-button>
       </div>
-    </vue-final-modal>
+    </v-modal>
     <v-button highlight @click="showModal = true">Open modal</v-button>
   </div>
 </template>
diff --git a/docs/components/examples/hoc/VModal.vue b/docs/components/examples/hoc/CustomModal.vue
similarity index 96%
rename from docs/components/examples/hoc/VModal.vue
rename to docs/components/examples/hoc/CustomModal.vue
index 3360d31f..673f6313 100644
--- a/docs/components/examples/hoc/VModal.vue
+++ b/docs/components/examples/hoc/CustomModal.vue
@@ -1,5 +1,5 @@
 <template>
-  <vue-final-modal
+  <v-modal
     v-slot="{ params, close }"
     v-bind="$attrs"
     classes="modal-container"
@@ -19,12 +19,12 @@
     <button class="modal__close" @click="close">
       <mdi-close></mdi-close>
     </button>
-  </vue-final-modal>
+  </v-modal>
 </template>
 
 <script>
 export default {
-  name: 'VModal',
+  name: 'CustomModal',
   inheritAttrs: false
 }
 </script>
diff --git a/docs/components/examples/hoc/HocExample.vue b/docs/components/examples/hoc/HocExample.vue
index 3118e9e1..40053e7f 100644
--- a/docs/components/examples/hoc/HocExample.vue
+++ b/docs/components/examples/hoc/HocExample.vue
@@ -1,9 +1,9 @@
 <template>
   <div>
-    <v-modal v-model="show" @confirm="confirm" @cancel="cancel">
+    <custom-modal v-model="show" @confirm="confirm" @cancel="cancel">
       <template v-slot:title>Hello, vue-final-modal</template>
       <p>Vue Final Modal is a renderless, stackable, detachable and lightweight modal component.</p>
-    </v-modal>
+    </custom-modal>
 
     <v-button highlight @click="show = true">Open modal</v-button>
   </div>
diff --git a/docs/components/examples/hoc/VTailwindModal.vue b/docs/components/examples/hoc/VTailwindModal.vue
index e25fb94e..31eb3c42 100644
--- a/docs/components/examples/hoc/VTailwindModal.vue
+++ b/docs/components/examples/hoc/VTailwindModal.vue
@@ -1,5 +1,5 @@
 <template>
-  <vue-final-modal
+  <v-modal
     v-slot="{ params, close }"
     v-bind="$attrs"
     classes="flex justify-center items-center"
@@ -19,7 +19,7 @@
     <button class="absolute top-0 right-0 mt-2 mr-2" @click="close">
       <mdi-close></mdi-close>
     </button>
-  </vue-final-modal>
+  </v-modal>
 </template>
 
 <script>
diff --git a/docs/content/en/api.md b/docs/content/en/api.md
index aa490270..38552998 100644
--- a/docs/content/en/api.md
+++ b/docs/content/en/api.md
@@ -5,13 +5,14 @@ category: API
 position: 7
 version: 2
 ---
+
 ## Usage
 
-<alert>`$vfm` is an object containing VueFinalModal's data/methods.</alert>
+<alert>`$modal` is an object containing VModal's data/methods.</alert>
 
 ### **Options API**
 
-Just use `this.$vfm`.
+Just use `this.$modal`.
 
 ### **Composition API** <badge>Vue 3 only</badge>
 
@@ -20,7 +21,7 @@ import { inject } from 'vue'
 
 export default {
   setup() {
-    const $vfm = inject('$vfm')
+    const $modal = inject('$modal')
   }
 }
 ```
@@ -41,12 +42,12 @@ export default {
 
   ```html
   <template>
-    <vue-final-modal v-model="show" name="example">
-      <template v-slot:title>$vfm.show</template>
+    <v-modal v-model="show" name="example">
+      <template v-slot:title>$modal.show</template>
       <template v-slot="{ params }">
         Hi {{ params.userName }}
       </template>
-    </vue-final-modal>
+    </v-modal>
   </template>
   <script>
     export default {
@@ -58,7 +59,7 @@ export default {
   ```
 
   ```js
-  this.$vfm.show('example', { userName: 'vue-final-modal' })
+  this.$modal.show('example', { userName: 'vue-final-modal' })
     .then(() => {
       // do something on modal opened
     })
@@ -66,7 +67,7 @@ export default {
 
   </sfc-view>
 
-  <alert>`v-model` is necessary when you open a modal with `$vfm.show(name)` API.</alert>
+  <alert>`v-model` is necessary when you open a modal with `$modal.show(name)` API.</alert>
 
 ### `hide([names])`
 
@@ -80,8 +81,8 @@ export default {
 
   ```vue
   <template>
-    <vue-final-modal v-model="show" name="example">Vue Final Modal is awesome</vue-final-modal>
-    <vue-final-modal v-model="show2" name="example2">Vue Final Modal is awesome 2</vue-final-modal>
+    <v-modal v-model="show" name="example">Vue Final Modal is awesome</v-modal>
+    <v-modal v-model="show2" name="example2">Vue Final Modal is awesome 2</v-modal>
   </template>
   ```
 
@@ -93,7 +94,7 @@ export default {
         show2: true
       }),
       mounted() {
-        this.$vfm.hide('example', 'example2').then(() => {
+        this.$modal.hide('example', 'example2').then(() => {
           // do something on modal closed
         })
       }
@@ -109,7 +110,7 @@ export default {
 - Example:
 
   ```js
-  this.$vfm.hideAll().then(() => {
+  this.$modal.hideAll().then(() => {
     // do something on all modals closed
   })
   ```
@@ -117,7 +118,7 @@ export default {
 Hide all modals.
 
 ```js
-this.$vfm.hideAll().then(() => {
+this.$modal.hideAll().then(() => {
   // do something on all modals closed
 })
 ```
@@ -133,7 +134,7 @@ this.$vfm.hideAll().then(() => {
 - Example:
 
   ```js
-  this.$vfm.toggle('myModal').then(() => {
+  this.$modal.toggle('myModal').then(() => {
     // do something on modals opened or closed, it depends on params `show` is true or false
   })
   ```
@@ -141,7 +142,7 @@ this.$vfm.hideAll().then(() => {
 Toggle modals by name.
 
 ```js
-this.$vfm.toggle('myModal').then(() => {
+this.$modal.toggle('myModal').then(() => {
   // do something on modals opened or closed, it depends on params `show` is true or false
 })
 ```
@@ -158,7 +159,7 @@ Get the modal instances by modal names.
 - Example:
 
   ```js
-  const modals = this.$vfm.get('modalName1', 'modalName2', ...)
+  const modals = this.$modal.get('modalName1', 'modalName2', ...)
   ```
 
 ### `openedModals`
@@ -168,11 +169,11 @@ Get the modal instances by modal names.
 - Examples:
   - get the first opened modal instance
     ```js
-      this.$vfm.openedModals[0]
+      this.$modal.openedModals[0]
     ```
   - get how many modals was opened
     ```js
-      this.$vfm.openedModals.length
+      this.$modal.openedModals.length
     ```
 
 ### `modals`
@@ -182,9 +183,9 @@ Get the modal instances by modal names.
 - Examples:
   - get the first created modal instance
     ```js
-      this.$vfm.modals[0]
+      this.$modal.modals[0]
     ```
   - get how many modals was created
     ```js
-      this.$vfm.modals.length
+      this.$modal.modals.length
     ```
\ No newline at end of file
diff --git a/docs/content/en/dynamic-modal.md b/docs/content/en/dynamic-modal.md
index 5c58efce..da657208 100644
--- a/docs/content/en/dynamic-modal.md
+++ b/docs/content/en/dynamic-modal.md
@@ -7,30 +7,30 @@ version: 2
 badge: v2.0.0+
 ---
 
-Vue Final Modal has a helper function to dynamically show a modal. This means that you don't have to add the modal to your Vue template and you don't have to use `v-model` to hide or show the modal. You can simply execute `$vfm.show` and pass a modal component as per the example below:
+Vue Final Modal has a helper function to dynamically show a modal. This means that you don't have to add the modal to your Vue template and you don't have to use `v-model` to hide or show the modal. You can simply execute `$modal.show` and pass a modal component as per the example below:
 
 ```js
-this.$vfm.show({ component: 'MyDynamicModal' })
+this.$modal.show({ component: 'MyDynamicModal' })
 ```
 
 The component `MyDynamicModal` is hypothetical, check the [Examples](#examples) below for an accurate example.
 
 ## Prerequisite
 
-As a requirement to using Dynamic modals you must add `<ModalsContainer />` to your main `App.vue` file like so:
+As a requirement to using Dynamic modals you must add `<VDynamicModals />` to your main `App.vue` file like so:
 
 ```html[App.vue]
 <div>
   ...
-  <modals-container></modals-container>
+  <v-dynamic-modals></v-dynamic-modals>
 </div>
 ```
 
-`ModalsContainer` is an invisible Vue component that is responsible for hosting the Vue instances of your dynamic modals. You don't need to do add anything else to the `ModalsContainer`, as long as you include it in your Vue tree, you can use Dynamic modals.
+`VDynamicModals` is an invisible Vue component that is responsible for hosting the Vue instances of your dynamic modals. You don't need to do add anything else to the `VDynamicModals`, as long as you include it in your Vue tree, you can use Dynamic modals.
 
 ## API
 
-### `$vfm.show(dynamicModalOptions, params)`
+### `$modal.show(dynamicModalOptions, params)`
 
 - Type: `Function`,
 - Arguments:
@@ -51,28 +51,28 @@ As a requirement to using Dynamic modals you must add `<ModalsContainer />` to y
       }
     }
     ```
-  - params: same as [API $vfm.show](/api#showname-params)
+  - params: same as [API $modal.show](/api#showname-params)
 - Returns: `Promise<Object>` | `Promise<Array>`
 
-To show dynamic modal you can use the API `$vfm.show` function.
+To show dynamic modal you can use the API `$modal.show` function.
 
-### `$vfm.dynamicModals`
+### `$modal.dynamicModals`
 
 - Type: 
   - `Array`: returns dynamic modal instances.
 - Examples:
   - get the first created dynamic modal instance
     ```js
-      this.$vfm.dynamicModals[0]
+      this.$modal.dynamicModals[0]
     ```
   - get how many dynamic modals was created
     ```js
-      this.$vfm.dynamicModals.length
+      this.$modal.dynamicModals.length
     ```
 
 ## Examples
 
-<modals-container></modals-container>
+<v-dynamic-modals></v-dynamic-modals>
 
 ### Basic
 
@@ -91,7 +91,7 @@ To show dynamic modal you can use the API `$vfm.show` function.
 export default {
   methods: {
     dynamic() {
-      this.$vfm.show({
+      this.$modal.show({
         component: 'VDynamicModal'
       })
     }
@@ -102,13 +102,24 @@ export default {
 
 </sfc-view>
 
+#### Register `v-dynamic-modals` in `App.vue` for modal container.
+
+```vue[App.vue]
+<template>
+  <div>
+    ...
+    <v-dynamic-modals></v-dynamic-modals>
+  </div>
+</template>
+```
+
 #### VDynamicModal.vue
 
 <sfc-view>
 
 ```vue
 <template>
-  <vue-final-modal
+  <v-modal
     v-slot="{ close }"
     v-bind="$attrs"
     classes="modal-container"
@@ -122,7 +133,7 @@ export default {
     <div class="modal__content">
       <p>Vue Final Modal is a renderless, stackable, detachable and lightweight modal component.</p>
     </div>
-  </vue-final-modal>
+  </v-modal>
 </template>
 ```
 ```vue
@@ -189,13 +200,13 @@ import VContent from '../VContent.vue'
 export default {
   methods: {
     dynamic() {
-      this.$vfm.show({
-        component: 'VModal',
+      this.$modal.show({
+        component: 'CustomModal',
         bind: {
           name: 'VDynamicAdvacedModal'
         },
         on: {
-          // event by v-modal
+          // event by custom-modal
           confirm(close) {
             console.log('confirm')
             close()
@@ -245,9 +256,20 @@ export default {
 
 </sfc-view>
 
-#### VModal.vue
+#### Register `v-dynamic-modals` in `App.vue` for modal container.
+
+```vue[App.vue]
+<template>
+  <div>
+    ...
+    <v-dynamic-modals></v-dynamic-modals>
+  </div>
+</template>
+```
+
+#### CustomModal.vue
 
-<alert>VModal is an HOC of vue-final-modal.</alert>
+<alert>Write an HOC called `CustomModal` base on `VModal` in vue-final-modal.</alert>
 
 > [See recommend usage](/examples/recommend)
 
@@ -255,7 +277,7 @@ export default {
 
 ```vue
 <template>
-  <vue-final-modal v-bind="$attrs" classes="modal-container" content-class="modal-content" v-on="$listeners">
+  <v-modal v-bind="$attrs" classes="modal-container" content-class="modal-content" v-on="$listeners">
     <template v-slot="{ params }">
       <span class="modal__title">
         <slot name="title"></slot>
@@ -271,13 +293,13 @@ export default {
         <mdi-close></mdi-close>
       </button>
     </template>
-  </vue-final-modal>
+  </v-modal>
 </template>
 ```
 ```vue
 <script>
 export default {
-  name: 'VModal',
+  name: 'CustomModal',
   inheritAttrs: false,
   methods: {
     close() {
diff --git a/docs/content/en/examples/recommend.md b/docs/content/en/examples/recommend.md
index 791d2957..e8fc59eb 100644
--- a/docs/content/en/examples/recommend.md
+++ b/docs/content/en/examples/recommend.md
@@ -14,13 +14,13 @@ You can create a `higher-order component` easily and can customize `template`, `
 
 </alert>
 
-### VModal.vue
+### CustomModal.vue
 
 <sfc-view>
 
 ```vue
 <template>
-  <vue-final-modal
+  <v-modal
     v-slot="{ params, close }"
     v-bind="$attrs"
     classes="modal-container"
@@ -40,13 +40,13 @@ You can create a `higher-order component` easily and can customize `template`, `
     <button class="modal__close" @click="close">
       <mdi-close></mdi-close>
     </button>
-  </vue-final-modal>
+  </v-modal>
 </template>
 ```
 ```vue
 <script>
 export default {
-  name: 'VModal',
+  name: 'CustomModal',
   inheritAttrs: false
 }
 </script>
@@ -103,7 +103,7 @@ export default {
 
 </sfc-view>
 
-## How to use VModal
+## How to use CustomModal
 
 ### Example
 
@@ -114,10 +114,10 @@ export default {
 ```vue
 <template>
   <div>
-    <v-modal v-model="show" @confirm="confirm" @cancel="cancel">
+    <custom-modal v-model="show" @confirm="confirm" @cancel="cancel">
       <template v-slot:title>Hello, vue-final-modal</template>
       <p>Vue Final Modal is a renderless, stackable, detachable and lightweight modal component.</p>
-    </v-modal>
+    </custom-modal>
 
     <v-button @click="show = true">Open modal</v-button>
   </div>
diff --git a/docs/content/en/examples/stepByStep.md b/docs/content/en/examples/stepByStep.md
index 1bc2149b..06dedcef 100644
--- a/docs/content/en/examples/stepByStep.md
+++ b/docs/content/en/examples/stepByStep.md
@@ -16,9 +16,9 @@ version: 2
   ```vue
   <template>
     <div>
-      <vue-final-modal v-model="showModal">
+      <v-modal v-model="showModal">
         Modal Content Here
-      </vue-final-modal>
+      </v-modal>
       <button @click="showModal = true">Open Modal</button>
     </div>
   </template>
@@ -37,15 +37,15 @@ version: 2
 
 - **Open modal with the [API](/api)**
 
-  <alert>`v-model` is necessary when you open a modal with `$vfm.show(name)` API.</alert>
+  <alert>`v-model` is necessary when you open a modal with `$modal.show(name)` API.</alert>
 
   <sfc-view>
 
   ```vue
   <template>
-    <vue-final-modal v-model="showModal" name="example">
+    <v-modal v-model="showModal" name="example">
         Modal Content Here
-    </vue-final-modal>
+    </v-modal>
     <button @click="openModalExample">Open Modal</button>
   </template>
   ```
@@ -58,7 +58,7 @@ version: 2
     }),
     methods: {
       openModalExample() {
-        this.$vfm.show('example')
+        this.$modal.show('example')
       }
     }
   }
@@ -78,9 +78,9 @@ version: 2
   ```vue
   <template>
     <div>
-      <vue-final-modal v-model="showModal">
+      <v-modal v-model="showModal">
         <span class="modal__title">Hello, vue-final-modal</span>
-      </vue-final-modal>
+      </v-modal>
       <v-button @click="showModal = true">Open modal</v-button>
     </div>
   </template>
@@ -116,9 +116,9 @@ version: 2
   ```vue
   <template>
     <div>
-      <vue-final-modal v-model="showModal" content-class="modal-content">
+      <v-modal v-model="showModal" content-class="modal-content">
         <span class="modal__title">Hello, vue-final-modal</span>
-      </vue-final-modal>
+      </v-modal>
       <v-button @click="showModal = true">Open modal</v-button>
     </div>
   </template>
@@ -168,9 +168,9 @@ version: 2
   ```vue
   <template>
     <div>
-      <vue-final-modal v-model="showModal" classes="modal-container" content-class="modal-content">
+      <v-modal v-model="showModal" classes="modal-container" content-class="modal-content">
         <span class="modal__title">Hello, vue-final-modal</span>
-      </vue-final-modal>
+      </v-modal>
       <v-button @click="showModal = true">Open modal</v-button>
     </div>
   </template>
@@ -227,12 +227,12 @@ version: 2
   ```vue
   <template>
     <div>
-      <vue-final-modal v-model="showModal" classes="modal-container" content-class="modal-content">
+      <v-modal v-model="showModal" classes="modal-container" content-class="modal-content">
         <span class="modal__title">Hello, vue-final-modal</span>
         <div class="modal__content">
           <p>Vue Final Modal is a renderless, stackable, detachable and lightweight modal component.</p>
         </div>
-      </vue-final-modal>
+      </v-modal>
       <v-button @click="showModal = true">Open modal</v-button>
     </div>
   </template>
@@ -289,7 +289,7 @@ version: 2
   ```vue
   <template>
     <div>
-      <vue-final-modal v-model="showModal" classes="modal-container" content-class="modal-content">
+      <v-modal v-model="showModal" classes="modal-container" content-class="modal-content">
         <button class="modal__close" @click="showModal = false">
           <mdi-close></mdi-close>
         </button>
@@ -297,7 +297,7 @@ version: 2
         <div class="modal__content">
           <p>Vue Final Modal is a renderless, stackable, detachable and lightweight modal component.</p>
         </div>
-      </vue-final-modal>
+      </v-modal>
       <v-button @click="showModal = true">Open modal</v-button>
     </div>
   </template>
@@ -361,7 +361,7 @@ version: 2
   ```vue
   <template>
     <div>
-      <vue-final-modal v-model="showModal" classes="modal-container" content-class="modal-content">
+      <v-modal v-model="showModal" classes="modal-container" content-class="modal-content">
         <button class="modal__close" @click="showModal = false">
           <mdi-close></mdi-close>
         </button>
@@ -371,7 +371,7 @@ version: 2
             Vue Final Modal is a renderless, stackable, detachable and lightweight modal component.
           </p>
         </div>
-      </vue-final-modal>
+      </v-modal>
       <v-button @click="showModal = true">Open modal</v-button>
     </div>
   </template>
@@ -440,7 +440,7 @@ version: 2
   ```vue
   <template>
     <div>
-      <vue-final-modal v-model="showModal" classes="modal-container" content-class="modal-content">
+      <v-modal v-model="showModal" classes="modal-container" content-class="modal-content">
         <button class="modal__close" @click="showModal = false">
           <mdi-close></mdi-close>
         </button>
@@ -454,7 +454,7 @@ version: 2
           <v-button @click="showModal = false">confirm</v-button>
           <v-button @click="showModal = false">cancel</v-button>
         </div>
-      </vue-final-modal>
+      </v-modal>
       <v-button @click="showModal = true">Open modal</v-button>
     </div>
   </template>
@@ -531,7 +531,7 @@ version: 2
   <template>
     <div>
       <!-- First modal -->
-      <vue-final-modal v-model="showModal" classes="modal-container" content-class="modal-content">
+      <v-modal v-model="showModal" classes="modal-container" content-class="modal-content">
         <button class="modal__close" @click="showModal = false">
           <mdi-close></mdi-close>
         </button>
@@ -545,10 +545,10 @@ version: 2
           <v-button highlight @click="showConfirmModal = true">confirm</v-button>
           <v-button @click="showModal = false">cancel</v-button>
         </div>
-      </vue-final-modal>
+      </v-modal>
 
       <!-- Second modal -->
-      <vue-final-modal v-model="showConfirmModal" classes="modal-container" content-class="modal-content">
+      <v-modal v-model="showConfirmModal" classes="modal-container" content-class="modal-content">
         <button class="modal__close" @click="showConfirmModal = false">
           <mdi-close></mdi-close>
         </button>
@@ -558,7 +558,7 @@ version: 2
           <v-button @click="confirm">confirm</v-button>
           <v-button @click="showConfirmModal = false">cancel</v-button>
         </div>
-      </vue-final-modal>
+      </v-modal>
 
       <v-button @click="showModal = true">Open modal</v-button>
     </div>
@@ -641,9 +641,9 @@ version: 2
 
   ```vue
   <template>
-    <vue-final-modal ... focus-trap>
+    <v-modal ... focus-trap>
       ...modal content
-    </vue-final-modal>
+    </v-modal>
   </template>
   ```
 
diff --git a/docs/content/en/examples/tailwind.md b/docs/content/en/examples/tailwind.md
index eed6c590..1cb089ea 100644
--- a/docs/content/en/examples/tailwind.md
+++ b/docs/content/en/examples/tailwind.md
@@ -20,7 +20,7 @@ You can create a `higher-order component` easily and can customize `template`, `
 
 ```vue
 <template>
-  <vue-final-modal
+  <v-modal
     v-slot="{ params, close }"
     v-bind="$attrs"
     classes="flex justify-center items-center"
@@ -40,7 +40,7 @@ You can create a `higher-order component` easily and can customize `template`, `
     <button class="absolute top-0 right-0 mt-2 mr-2" @click="close">
       <mdi-close></mdi-close>
     </button>
-  </vue-final-modal>
+  </v-modal>
 </template>
 ```
 
diff --git a/docs/content/en/guide/params.md b/docs/content/en/guide/params.md
index 9a96183f..0b46dbb9 100644
--- a/docs/content/en/guide/params.md
+++ b/docs/content/en/guide/params.md
@@ -7,7 +7,7 @@ fullscreen: true
 version: 2
 ---
 
-When you open a modal though the [API](/api) `$vfm.show(name, params)`.
+When you open a modal though the [API](/api) `$modal.show(name, params)`.
 
 ## You have two ways to get `params`:
 
@@ -22,9 +22,9 @@ When you open a modal though the [API](/api) `$vfm.show(name, params)`.
 ### On `@beforeOpen` event
 
 ```html
-<vue-final-modal @beforeOpen="event => event.ref.params">
+<v-modal @beforeOpen="event => event.ref.params">
   <!-- modal content -->
-</vue-final-modal>
+</v-modal>
 ```
 
 <alert>`params` will be reset to `{}` automatically after [`closed`](/guide/events#closed) event. You can avoid the modal to reset the `params` to empty object by calling `event.stop()`.</alert>
diff --git a/docs/content/en/guide/properties.md b/docs/content/en/guide/properties.md
index 48425eea..0f8b5b4e 100644
--- a/docs/content/en/guide/properties.md
+++ b/docs/content/en/guide/properties.md
@@ -10,7 +10,7 @@ version: 2
 
 ```vue
 <template>
-  <vue-final-modal
+  <v-modal
     :name="null"
     :value="false"
     :ssr="true"
@@ -45,7 +45,7 @@ version: 2
     :max-height="Infinity"
   >
     ...modal content
-  </vue-final-modal>
+  </v-modal>
 </template>
 ```
 
@@ -54,9 +54,9 @@ version: 2
 - Type: `String`
 - Default: `null`
 
-Modal name for the [API](/api) `$vfm.show(name)`, `$vfm.hide(name)`, etc.
+Modal name for the [API](/api) `$modal.show(name)`, `$modal.hide(name)`, etc.
 
-<alert>`v-model` is necessary when you open a modal with `$vfm.show(name)`.</alert>
+<alert>`v-model` is necessary when you open a modal with `$modal.show(name)`.</alert>
 
 ## `ssr`
 
@@ -133,7 +133,7 @@ CSS transition applied to the modal container.
 
 ```vue
 <template>
-  <vue-final-modal
+  <v-modal
     :transition="{
       'enter-active-class': 'transition duration-200 ease-in-out transform',
       'enter-class': 'translate-y-full',
@@ -144,7 +144,7 @@ CSS transition applied to the modal container.
     }"
   >
     ...modal content
-  </vue-final-modal>
+  </v-modal>
 </template>
 ```
 
@@ -176,7 +176,7 @@ CSS transition applied to the modal overlay.
 
 ```vue
 <template>
-  <vue-final-modal
+  <v-modal
     :transition="{
       'enter-active-class': 'transition duration-200 ease-in-out transform',
       'enter-class': 'translate-y-full',
@@ -187,7 +187,7 @@ CSS transition applied to the modal overlay.
     }"
   >
     ...modal content
-  </vue-final-modal>
+  </v-modal>
 </template>
 ```
 
@@ -298,7 +298,7 @@ Limit the x-axis, y-axis, width and height of the `.vfm__content` to not exceed
 - Example:
 
   ```html
-  <vue-final-modal drag-selector=".modal-drag">
+  <v-modal drag-selector=".modal-drag">
     <div class="modal-title modal-drag">...</div>
     <div class="modal-content">...</div>
     <div class="modal-action">...</div>
diff --git a/docs/content/en/guide/scoped-slots.md b/docs/content/en/guide/scoped-slots.md
index 51f9e339..d569144f 100644
--- a/docs/content/en/guide/scoped-slots.md
+++ b/docs/content/en/guide/scoped-slots.md
@@ -15,10 +15,10 @@ When you are using vue-final-modal as a HOC. you can `close` modal with scoped-s
 
 ```vue
 <template>
-  <vue-final-modal v-slot="{ close }" v-bind="$attrs" v-on="$listeners">
+  <v-modal v-slot="{ close }" v-bind="$attrs" v-on="$listeners">
     <div>Hello Vue Final Modal</div>
     <button @click="close">close modal</button>
-  </vue-final-modal>
+  </v-modal>
 </template>
 
 <script>
@@ -34,7 +34,7 @@ export default {
 - type: `Any`
 - default: `{}`
 
-When you open a modal though the [API](/api) `$vfm.show(name, params)`, you can get `params` with scoped-slot:
+When you open a modal though the [API](/api) `$modal.show(name, params)`, you can get `params` with scoped-slot:
 
 ```html
 <template v-slot="{ params }">
diff --git a/docs/content/en/options.md b/docs/content/en/options.md
deleted file mode 100644
index d3d81dca..00000000
--- a/docs/content/en/options.md
+++ /dev/null
@@ -1,53 +0,0 @@
----
-title: Options
-description: 'Vue Final Modal is a renderless, stackable, detachable and lightweight modal component.'
-category: Getting started
-position: 2
-version: 2
----
-
-Options can be passed as a second argument to `Vue.use`.
-
-```js
-import VueFinalModal from 'vue-final-modal'
-
-Vue.use(VueFinalModal(), { 
-    componentName: 'VueFinalModal',
-    key: '$vfm',    
-    dynamicContainerName: 'ModalsContainer'
-})
-```
-
-Or can be passed as a first argument to `VueFinalModal`.
-
-```js
-import VueFinalModal from 'vue-final-modal'
-
-Vue.use(VueFinalModal({ 
-    componentName: 'VueFinalModal',
-    key: '$vfm',    
-    dynamicContainerName: 'ModalsContainer'
-}))
-```
-
-## `componentName`
-
-- Type: `String`
-- default: `'VueFinalModal'`
-
-Customize component name from `VueFinalModal` to any other string value.
-
-## `key`
-
-- Type: `String`
-- default: `'$vfm'`
-
-Customize API name from `$vfm` to any other string value. 
-<alert>It is useful when you create multiple instance of  `VueFinalModal` as spinner, toast, notify, etc.</alert>
-
-## `dynamicContainerName`
-
-- Type: `String`
-- default: `'ModalsContainer'`
-
-Customize dynamic modals container name from `ModalsContainer` to any other string value.
diff --git a/docs/content/en/setup.md b/docs/content/en/setup.md
index 6388de7b..fb764834 100644
--- a/docs/content/en/setup.md
+++ b/docs/content/en/setup.md
@@ -8,52 +8,98 @@ version: 2
 
 ## Installation
 
-**@next: <badge>1.x.x</badge>, <badge>3.x.x</badge> for Vue 3**
+### **Vue 3**
 
 <code-group>
-  <code-block label="Yarn" active>
+  <code-block label="npm" active>
+
+```bash
+npm install vue-final-modal@next
+```
+
+  </code-block>
+  <code-block label="yarn">
 
 ```bash
 yarn add vue-final-modal@next
 ```
 
   </code-block>
-  <code-block label="NPM">
+  <code-block label="pnpm">
 
 ```bash
-npm install vue-final-modal@next
+pnpm add vue-final-modal@next
 ```
 
   </code-block>
 </code-group>
 
-**@latest: <badge>0.x.x</badge>, <badge>2.x.x</badge> for Vue 2**
+### **Vue 2**
 
 <code-group>
-  <code-block label="Yarn" active>
+  <code-block label="npm" active>
+
+```bash
+npm install vue-final-modal@latest
+```
+
+  </code-block>
+  <code-block label="yarn">
 
 ```bash
 yarn add vue-final-modal@latest
 ```
 
   </code-block>
-  <code-block label="NPM">
+  <code-block label="pnpm">
 
 ```bash
-npm install vue-final-modal@latest
+yarn add vue-final-modal@latest
 ```
 
   </code-block>
 </code-group>
 
-## Registeration
+## Import base on your needs
+
+Checkout how to use [$modal](/api), [VModal](/examples/liveDemo), [VDynamicModals](/dynamic-modal).
 
-### Vue
+```vue
+<script>
+import { $modal, VModal, VDynamicModals } from 'vue-final-modal'
+
+export default {
+  components: {
+    VModal,
+    VDynamicModals
+  }
+}
+</script>
+```
+
+## Global Register plugin
+
+### `vfmPlugin`
+
+- Type: `Function | PluginObject`
+- Arguments: `Object`
+  - default;
+  ```js
+  {
+    key: '$modal',
+    name: 'VModal',
+    containerName: 'VDynamicModals'
+  }
+  ```
+- Returns: `PluginObject`
+- Examples:
+
+### Vue 2
 
 ```js[main.js]
-import VueFinalModal from 'vue-final-modal'
+import { vfmPlugin } from 'vue-final-modal'
 
-Vue.use(VueFinalModal())
+Vue.use(vfmPlugin)
 ```
 
 ### Nuxt
@@ -61,9 +107,9 @@ Vue.use(VueFinalModal())
 - **Write a plugin `vue-final-modal.js`**
 
 ```js[plugins/vue-final-modal.js]
-import VueFinalModal from 'vue-final-modal/lib'
+import { vfmPlugin } from 'vue-final-modal/lib'
 
-Vue.use(VueFinalModal())
+Vue.use(vfmPlugin)
 ```
 
 - **Add plugin into `nuxt.config.js`**
@@ -77,7 +123,19 @@ export default {
 }
 ```
 
-### CDN
+### Overwrite `key`, `name`, `containerName`
+
+```js[main.js]
+import { vfmPlugin } from 'vue-final-modal'
+
+Vue.use(vfmPlugin({
+  key: '$modal',
+  name: 'VModal',
+  containerName: 'VDynamicModals'
+}))
+```
+
+## CDN
 
 <alert>[Live demo](https://codepen.io/hunterliu1003/pen/ZEWoYeE)</alert>
 
diff --git a/docs/content/en/typescript.md b/docs/content/en/typescript.md
index 5e2a0c4d..e838c062 100644
--- a/docs/content/en/typescript.md
+++ b/docs/content/en/typescript.md
@@ -9,21 +9,22 @@ version: 2
 
 ## Vue
 
-It just works like a charm without any settings. But if you need to customize the setup [options](/options), you can define the type like below:
+It just works like a charm without any settings. But if you need to customize the setup [options](/setup#vfmplugin), you can define the type like below:
 
 ```ts[main.ts]
 import Vue from 'vue'
-import VueFinalModal, { VfmOptions, VueFinalModalProperty } from 'vue-final-modal'
+import { vfmPlugin, VfmOptions, $ModalProperty } from 'vue-final-modal'
 
-Vue.use<VfmOptions>(VueFinalModal(), {
-  componentName: 'VModal',
-  key: '$modal'
-})
+Vue.use<VfmOptions>(vfmPlugin({
+  key: '$modal',
+  name: 'VModal',
+  containerName: 'VDynamicModals'
+}))
 
 // define the setup options
 declare module 'vue/types/vue' {
   interface Vue {
-    $modal: VueFinalModalProperty
+    $modal: $ModalProperty
   }
 }
 ```
diff --git a/docs/content/zh-Hant/api.md b/docs/content/zh-Hant/api.md
index 034d0184..5bcdafc7 100644
--- a/docs/content/zh-Hant/api.md
+++ b/docs/content/zh-Hant/api.md
@@ -5,13 +5,14 @@ category: API
 position: 7
 version: 2
 ---
+
 ## Usage
 
-<alert>`$vfm` 是一個存放 VueFinalModal 資料與方法的物件</alert>
+<alert>`$modal` 是一個存放 VueFinalModal 資料與方法的物件</alert>
 
 ### **Options API**
 
-在組件內使用 `this.$vfm`.
+在組件內使用 `this.$modal`.
 
 ### **Composition API** <badge>Vue 3 only</badge>
 
@@ -20,7 +21,7 @@ import { inject } from 'vue'
 
 export default {
   setup() {
-    const $vfm = inject('$vfm')
+    const $modal = inject('$modal')
   }
 }
 ```
@@ -41,12 +42,12 @@ export default {
 
   ```html
   <template>
-    <vue-final-modal v-model="show" name="example">
-      <template v-slot:title>$vfm.show</template>
+    <v-modal v-model="show" name="example">
+      <template v-slot:title>$modal.show</template>
       <template v-slot="{ params }">
         Hi {{ params.userName }}
       </template>
-    </vue-final-modal>
+    </v-modal>
   </template>
   <script>
     export default {
@@ -58,7 +59,7 @@ export default {
   ```
 
   ```js
-  this.$vfm.show('example', { userName: 'vue-final-modal' })
+  this.$modal.show('example', { userName: 'vue-final-modal' })
     .then(() => {
       // do something on modal opened
     })
@@ -66,7 +67,7 @@ export default {
 
   </sfc-view>
 
-  <alert>如果要使用 `$vfm.show(name)` 打開 modal，`v-model` 是必須給的。</alert>
+  <alert>如果要使用 `$modal.show(name)` 打開 modal，`v-model` 是必須給的。</alert>
 
 ### `hide([names])`
 
@@ -80,8 +81,8 @@ export default {
 
   ```vue
   <template>
-    <vue-final-modal v-model="show" name="example">Vue Final Modal is awesome</vue-final-modal>
-    <vue-final-modal v-model="show2" name="example2">Vue Final Modal is awesome 2</vue-final-modal>
+    <v-modal v-model="show" name="example">Vue Final Modal is awesome</v-modal>
+    <v-modal v-model="show2" name="example2">Vue Final Modal is awesome 2</v-modal>
   </template>
   ```
 
@@ -93,7 +94,7 @@ export default {
         show2: true
       }),
       mounted() {
-        this.$vfm.hide('example', 'example2').then(() => {
+        this.$modal.hide('example', 'example2').then(() => {
           // do something on modal closed
         })
       }
@@ -109,7 +110,7 @@ export default {
 - 範例：
 
   ```js
-  this.$vfm.hideAll().then(() => {
+  this.$modal.hideAll().then(() => {
     // 當所有 modal 關閉後，做一些事
   })
   ```
@@ -117,7 +118,7 @@ export default {
 關閉所有的 modal。
 
 ```js
-this.$vfm.hideAll().then(() => {
+this.$modal.hideAll().then(() => {
   // 當所有 modal 關閉後，做一些事
 })
 ```
@@ -133,7 +134,7 @@ this.$vfm.hideAll().then(() => {
 - 範例：
 
   ```js
-  this.$vfm.toggle('myModal').then(() => {
+  this.$modal.toggle('myModal').then(() => {
     // 當多個 modal 被開啟或被關閉時，做一些事，開啟或關閉取決於 show 參數給的是 true 或 false
   })
   ```
@@ -141,7 +142,7 @@ this.$vfm.hideAll().then(() => {
 根據名字（name）切換 modals 的狀態。
 
 ```js
-this.$vfm.toggle('myModal').then(() => {
+this.$modal.toggle('myModal').then(() => {
   // 當多個 modal 被開啟或被關閉時，做一些事，開啟或關閉取決於 show 參數給的是 true 或 false
 })
 ```
@@ -156,7 +157,7 @@ this.$vfm.toggle('myModal').then(() => {
 - 範例：
 
   ```js
-  const modals = this.$vfm.get('modalName1', 'modalName2', ...)
+  const modals = this.$modal.get('modalName1', 'modalName2', ...)
   ```
 
 ### `openedModals`
@@ -166,15 +167,15 @@ this.$vfm.toggle('myModal').then(() => {
 - 範例：
   - 取得第一個打開的 modal 實例
     ```js
-      this.$vfm.modals[0]
+      this.$modal.modals[0]
     ```
   - 取得現在打開的 modal 總數
     ```js
-      this.$vfm.modals.length
+      this.$modal.modals.length
     ```
 
-1. `$vfm.openedModals[0]`: 取得第一個打開的 modal 實例。
-2. `$vfm.openedModals.length`: 取得現在打開的 modal 總數。
+1. `$modal.openedModals[0]`: 取得第一個打開的 modal 實例。
+2. `$modal.openedModals.length`: 取得現在打開的 modal 總數。
 
 ### `modals`
 
@@ -183,9 +184,9 @@ this.$vfm.toggle('myModal').then(() => {
 - 範例：
   - 取得第一個創建的 modal 實例
     ```js
-      this.$vfm.modals[0]
+      this.$modal.modals[0]
     ```
   - 取得現在創建的 modal 總數
     ```js
-      this.$vfm.modals.length
+      this.$modal.modals.length
     ```
diff --git a/docs/content/zh-Hant/dynamic-modal.md b/docs/content/zh-Hant/dynamic-modal.md
index 7a50d948..fa6996ff 100644
--- a/docs/content/zh-Hant/dynamic-modal.md
+++ b/docs/content/zh-Hant/dynamic-modal.md
@@ -9,14 +9,14 @@ badge: v2.0.0+
 
 這個功能讓你可以動態的建立 modal。
 
-## 新增 `ModalsContainer`
+## 新增 `VDynamicModals`
 
-所有的動態 modals 都會被崁入、顯示在 `ModalsContainer` 元件中。你可以透過 [$vfm.dynamicModals](#dynamicmodals) 屬性取得所有的動態 modal 實例 
+所有的動態 modals 都會被崁入、顯示在 `VDynamicModals` 元件中。你可以透過 [$modal.dynamicModals](#dynamicmodals) 屬性取得所有的動態 modal 實例 
 
 ```html[App.vue]
 <div>
   ...
-  <modals-container></modals-container>
+  <v-dynamic-modals></v-dynamic-modals>
 </div>
 ```
 
@@ -43,10 +43,10 @@ badge: v2.0.0+
       }
     }
     ```
-  - params: 與 [API $vfm.show](/zh-Hant/api#showname-params) 相同
+  - params: 與 [API $modal.show](/zh-Hant/api#showname-params) 相同
 - 回傳： `Promise<Object>` | `Promise<Array>`
 
-你可以透過 `$vfm.show` 這個方法開啟動態 modal。
+你可以透過 `$modal.show` 這個方法開啟動態 modal。
 
 ### `dynamicModals`
 
@@ -55,16 +55,16 @@ badge: v2.0.0+
 - 範例：
   - 取得第一個創建的動態 modal 實例
     ```js
-      this.$vfm.dynamicModals[0]
+      this.$modal.dynamicModals[0]
     ```
   - 取得現在創建的動態 modal 總數
     ```js
-      this.$vfm.dynamicModals.length
+      this.$modal.dynamicModals.length
     ```
 
 ## 範例
 
-<modals-container></modals-container>
+<v-dynamic-modals></v-dynamic-modals>
 
 ### 基本
 
@@ -83,7 +83,7 @@ badge: v2.0.0+
 export default {
   methods: {
     dynamic() {
-      this.$vfm.show({
+      this.$modal.show({
         component: 'VDynamicModal'
       })
     }
@@ -100,7 +100,7 @@ export default {
 
 ```vue
 <template>
-  <vue-final-modal
+  <v-modal
     v-slot="{ close }"
     v-bind="$attrs"
     classes="modal-container"
@@ -114,7 +114,7 @@ export default {
     <div class="modal__content">
       <p>Vue Final Modal is a renderless, stackable, detachable and lightweight modal component.</p>
     </div>
-  </vue-final-modal>
+  </v-modal>
 </template>
 ```
 ```vue
@@ -181,13 +181,13 @@ import VContent from '../VContent.vue'
 export default {
   methods: {
     dynamic() {
-      this.$vfm.show({
-        component: 'VModal',
+      this.$modal.show({
+        component: 'CustomModal',
         bind: {
           name: 'VDynamicAdvacedModal'
         },
         on: {
-          // event by v-modal
+          // event by custom-modal
           confirm(close) {
             console.log('confirm')
             close()
@@ -237,9 +237,9 @@ export default {
 
 </sfc-view>
 
-#### VModal.vue
+#### CustomModal.vue
 
-<alert>VModal 是一個 vue-final-modal 的高階元件（HOC）。</alert>
+<alert>基於 vue-final-modal 中的 `VModal` 寫一個叫做 `CustomModal` 的高階元件（HOC）</alert>
 
 [Source code](/zh-Hant/examples/recommend)
 
@@ -247,7 +247,7 @@ export default {
 
 ```vue
 <template>
-  <vue-final-modal v-bind="$attrs" classes="modal-container" content-class="modal-content" v-on="$listeners">
+  <v-modal v-bind="$attrs" classes="modal-container" content-class="modal-content" v-on="$listeners">
     <template v-slot="{ params }">
       <span class="modal__title">
         <slot name="title"></slot>
@@ -263,13 +263,13 @@ export default {
         <mdi-close></mdi-close>
       </button>
     </template>
-  </vue-final-modal>
+  </v-modal>
 </template>
 ```
 ```vue
 <script>
 export default {
-  name: 'VModal',
+  name: 'CustomModal',
   inheritAttrs: false,
   methods: {
     close() {
diff --git a/docs/content/zh-Hant/examples/recommend.md b/docs/content/zh-Hant/examples/recommend.md
index b2e8a69b..9546ef03 100644
--- a/docs/content/zh-Hant/examples/recommend.md
+++ b/docs/content/zh-Hant/examples/recommend.md
@@ -14,13 +14,13 @@ version: 2
 
 </alert>
 
-### VModal.vue
+### CustomModal.vue
 
 <sfc-view>
 
 ```vue
 <template>
-  <vue-final-modal
+  <v-modal
     v-slot="{ params, close }"
     v-bind="$attrs"
     classes="modal-container"
@@ -40,13 +40,13 @@ version: 2
     <button class="modal__close" @click="close">
       <mdi-close></mdi-close>
     </button>
-  </vue-final-modal>
+  </v-modal>
 </template>
 ```
 ```vue
 <script>
 export default {
-  name: 'VModal',
+  name: 'CustomModal',
   inheritAttrs: false
 }
 </script>
@@ -103,7 +103,7 @@ export default {
 
 </sfc-view>
 
-## 如何使用 VModal
+## 如何使用 CustomModal
 
 ### 範例
 
@@ -114,10 +114,10 @@ export default {
 ```vue
 <template>
   <div>
-    <v-modal v-model="show" @confirm="confirm" @cancel="cancel">
+    <custom-modal v-model="show" @confirm="confirm" @cancel="cancel">
       <template v-slot:title>Hello, vue-final-modal</template>
       <p>Vue Final Modal is a renderless, stackable, detachable and lightweight modal component.</p>
-    </v-modal>
+    </custom-modal>
 
     <v-button @click="show = true">Open modal</v-button>
   </div>
diff --git a/docs/content/zh-Hant/examples/stepByStep.md b/docs/content/zh-Hant/examples/stepByStep.md
index 91beaf09..db5fe18d 100644
--- a/docs/content/zh-Hant/examples/stepByStep.md
+++ b/docs/content/zh-Hant/examples/stepByStep.md
@@ -16,9 +16,9 @@ version: 2
   ```vue
   <template>
     <div>
-      <vue-final-modal v-model="showModal">
+      <v-modal v-model="showModal">
         Modal Content Here
-      </vue-final-modal>
+      </v-modal>
       <button @click="showModal = true">Open Modal</button>
     </div>
   </template>
@@ -37,15 +37,15 @@ version: 2
 
 - **使用 [API](/zh-Hant/api) 開啟 modal**
 
-<alert>當使用 `$vfm.show(name)` API 開啟，`v-model` 為必要的屬性。</alert>
+<alert>當使用 `$modal.show(name)` API 開啟，`v-model` 為必要的屬性。</alert>
 
   <sfc-view>
 
   ```vue
   <template>
-    <vue-final-modal v-model="showModal" name="example">
+    <v-modal v-model="showModal" name="example">
         Modal Content Here
-    </vue-final-modal>
+    </v-modal>
     <button @click="openModalExample">Open Modal</button>
   </template>
   ```
@@ -58,7 +58,7 @@ version: 2
     }),
     methods: {
       openModalExample() {
-        this.$vfm.show('example')
+        this.$modal.show('example')
       }
     }
   }
@@ -78,9 +78,9 @@ version: 2
   ```vue
   <template>
     <div>
-      <vue-final-modal v-model="showModal">
+      <v-modal v-model="showModal">
         <span class="modal__title">Hello, vue-final-modal</span>
-      </vue-final-modal>
+      </v-modal>
       <v-button @click="showModal = true">Open modal</v-button>
     </div>
   </template>
@@ -116,9 +116,9 @@ version: 2
   ```vue
   <template>
     <div>
-      <vue-final-modal v-model="showModal" content-class="modal-content">
+      <v-modal v-model="showModal" content-class="modal-content">
         <span class="modal__title">Hello, vue-final-modal</span>
-      </vue-final-modal>
+      </v-modal>
       <v-button @click="showModal = true">Open modal</v-button>
     </div>
   </template>
@@ -168,9 +168,9 @@ version: 2
   ```vue
   <template>
     <div>
-      <vue-final-modal v-model="showModal" classes="modal-container" content-class="modal-content">
+      <v-modal v-model="showModal" classes="modal-container" content-class="modal-content">
         <span class="modal__title">Hello, vue-final-modal</span>
-      </vue-final-modal>
+      </v-modal>
       <v-button @click="showModal = true">Open modal</v-button>
     </div>
   </template>
@@ -227,12 +227,12 @@ version: 2
   ```vue
   <template>
     <div>
-      <vue-final-modal v-model="showModal" classes="modal-container" content-class="modal-content">
+      <v-modal v-model="showModal" classes="modal-container" content-class="modal-content">
         <span class="modal__title">Hello, vue-final-modal</span>
         <div class="modal__content">
           <p>Vue Final Modal is a renderless, stackable, detachable and lightweight modal component.</p>
         </div>
-      </vue-final-modal>
+      </v-modal>
       <v-button @click="showModal = true">Open modal</v-button>
     </div>
   </template>
@@ -289,7 +289,7 @@ version: 2
   ```vue
   <template>
     <div>
-      <vue-final-modal v-model="showModal" classes="modal-container" content-class="modal-content">
+      <v-modal v-model="showModal" classes="modal-container" content-class="modal-content">
         <button class="modal__close" @click="showModal = false">
           <mdi-close></mdi-close>
         </button>
@@ -297,7 +297,7 @@ version: 2
         <div class="modal__content">
           <p>Vue Final Modal is a renderless, stackable, detachable and lightweight modal component.</p>
         </div>
-      </vue-final-modal>
+      </v-modal>
       <v-button @click="showModal = true">Open modal</v-button>
     </div>
   </template>
@@ -361,7 +361,7 @@ version: 2
   ```vue
   <template>
     <div>
-      <vue-final-modal v-model="showModal" classes="modal-container" content-class="modal-content">
+      <v-modal v-model="showModal" classes="modal-container" content-class="modal-content">
         <button class="modal__close" @click="showModal = false">
           <mdi-close></mdi-close>
         </button>
@@ -371,7 +371,7 @@ version: 2
             Vue Final Modal is a renderless, stackable, detachable and lightweight modal component.
           </p>
         </div>
-      </vue-final-modal>
+      </v-modal>
       <v-button @click="showModal = true">Open modal</v-button>
     </div>
   </template>
@@ -440,7 +440,7 @@ version: 2
   ```vue
   <template>
     <div>
-      <vue-final-modal v-model="showModal" classes="modal-container" content-class="modal-content">
+      <v-modal v-model="showModal" classes="modal-container" content-class="modal-content">
         <button class="modal__close" @click="showModal = false">
           <mdi-close></mdi-close>
         </button>
@@ -454,7 +454,7 @@ version: 2
           <v-button @click="showModal = false">confirm</v-button>
           <v-button @click="showModal = false">cancel</v-button>
         </div>
-      </vue-final-modal>
+      </v-modal>
       <v-button @click="showModal = true">Open modal</v-button>
     </div>
   </template>
@@ -531,7 +531,7 @@ version: 2
   <template>
     <div>
       <!-- First modal -->
-      <vue-final-modal v-model="showModal" classes="modal-container" content-class="modal-content">
+      <v-modal v-model="showModal" classes="modal-container" content-class="modal-content">
         <button class="modal__close" @click="showModal = false">
           <mdi-close></mdi-close>
         </button>
@@ -545,10 +545,10 @@ version: 2
           <v-button highlight @click="showConfirmModal = true">confirm</v-button>
           <v-button @click="showModal = false">cancel</v-button>
         </div>
-      </vue-final-modal>
+      </v-modal>
 
       <!-- Second modal -->
-      <vue-final-modal v-model="showConfirmModal" classes="modal-container" content-class="modal-content">
+      <v-modal v-model="showConfirmModal" classes="modal-container" content-class="modal-content">
         <button class="modal__close" @click="showConfirmModal = false">
           <mdi-close></mdi-close>
         </button>
@@ -558,7 +558,7 @@ version: 2
           <v-button @click="confirm">confirm</v-button>
           <v-button @click="showConfirmModal = false">cancel</v-button>
         </div>
-      </vue-final-modal>
+      </v-modal>
 
       <v-button @click="showModal = true">Open modal</v-button>
     </div>
@@ -641,9 +641,9 @@ version: 2
 
   ```vue
   <template>
-    <vue-final-modal ... focus-trap>
+    <v-modal ... focus-trap>
       ...modal content
-    </vue-final-modal>
+    </v-modal>
   </template>
   ```
 
diff --git a/docs/content/zh-Hant/examples/tailwind.md b/docs/content/zh-Hant/examples/tailwind.md
index d9cc2d78..f6ee94aa 100644
--- a/docs/content/zh-Hant/examples/tailwind.md
+++ b/docs/content/zh-Hant/examples/tailwind.md
@@ -20,7 +20,7 @@ version: 2
 
 ```vue
 <template>
-  <vue-final-modal
+  <v-modal
     v-slot="{ params, close }"
     v-bind="$attrs"
     classes="flex justify-center items-center"
@@ -40,7 +40,7 @@ version: 2
     <button class="absolute top-0 right-0 mt-2 mr-2" @click="close">
       <mdi-close></mdi-close>
     </button>
-  </vue-final-modal>
+  </v-modal>
 </template>
 ```
 
diff --git a/docs/content/zh-Hant/guide/params.md b/docs/content/zh-Hant/guide/params.md
index c42c3715..0c4efa0b 100644
--- a/docs/content/zh-Hant/guide/params.md
+++ b/docs/content/zh-Hant/guide/params.md
@@ -7,7 +7,7 @@ fullscreen: true
 version: 2
 ---
 
-當你透過 [API](/zh-Hant/api) `$vfm.show(name, params)` 開啟 modal。
+當你透過 [API](/zh-Hant/api) `$modal.show(name, params)` 開啟 modal。
 
 ## 你有兩個方法取得 `params`：
 
@@ -22,9 +22,9 @@ version: 2
 ### 在 `@beforeOpen` 事件
 
 ```html
-<vue-final-modal @beforeOpen="event => event.ref.params">
+<v-modal @beforeOpen="event => event.ref.params">
   <!-- modal content -->
-</vue-final-modal>
+</v-modal>
 ```
 
 <alert>在 [`closed`](/zh-Hant/guide/events#closed) 事件之後 `params` 會自動被重置為 `{}`。你可以透過調用 `event.stop()` 來避免 `params` 被重置</alert>
diff --git a/docs/content/zh-Hant/guide/properties.md b/docs/content/zh-Hant/guide/properties.md
index 6b6dc95e..e3dbb5f0 100644
--- a/docs/content/zh-Hant/guide/properties.md
+++ b/docs/content/zh-Hant/guide/properties.md
@@ -10,7 +10,7 @@ version: 2
 
 ```vue
 <template>
-  <vue-final-modal
+  <v-modal
     :name="null"
     :value="false"
     :ssr="true"
@@ -45,7 +45,7 @@ version: 2
     :max-height="Infinity"
   >
     ...modal content
-  </vue-final-modal>
+  </v-modal>
 </template>
 ```
 
@@ -54,9 +54,9 @@ version: 2
 - 型別： `String`
 - 預設： `null`
 
-這個 modal 的名字，用於使用 [API](/zh-Hant/api)  `$vfm.show(name)`、`$vfm.hide(name)` 等。
+這個 modal 的名字，用於使用 [API](/zh-Hant/api)  `$modal.show(name)`、`$modal.hide(name)` 等。
 
-<alert>如果要使用 `$vfm.show(name)` 打開 modal，`v-model` 是必須給的。</alert>
+<alert>如果要使用 `$modal.show(name)` 打開 modal，`v-model` 是必須給的。</alert>
 
 ## `ssr`
 
@@ -133,7 +133,7 @@ version: 2
 
 ```vue
 <template>
-  <vue-final-modal
+  <v-modal
     :transition="{
       'enter-active-class': 'transition duration-200 ease-in-out transform',
       'enter-class': 'translate-y-full',
@@ -144,7 +144,7 @@ version: 2
     }"
   >
     ...modal content
-  </vue-final-modal>
+  </v-modal>
 </template>
 ```
 
@@ -176,7 +176,7 @@ version: 2
 
 ```vue
 <template>
-  <vue-final-modal
+  <v-modal
     :transition="{
       'enter-active-class': 'transition duration-200 ease-in-out transform',
       'enter-class': 'translate-y-full',
@@ -187,7 +187,7 @@ version: 2
     }"
   >
     ...modal content
-  </vue-final-modal>
+  </v-modal>
 </template>
 ```
 
@@ -300,7 +300,7 @@ version: 2
 - 範例：
 
   ```html
-  <vue-final-modal drag-selector=".modal-drag">
+  <v-modal drag-selector=".modal-drag">
     <div class="modal-title modal-drag">...</div>
     <div class="modal-content">...</div>
     <div class="modal-action">...</div>
diff --git a/docs/content/zh-Hant/guide/scoped-slots.md b/docs/content/zh-Hant/guide/scoped-slots.md
index 78ba81db..4c69b387 100644
--- a/docs/content/zh-Hant/guide/scoped-slots.md
+++ b/docs/content/zh-Hant/guide/scoped-slots.md
@@ -15,10 +15,10 @@ version: 2
 
 ```vue
 <template>
-  <vue-final-modal v-slot="{ close }" v-bind="$attrs" v-on="$listeners">
+  <v-modal v-slot="{ close }" v-bind="$attrs" v-on="$listeners">
     <div>哈囉，Vue Final Modal</div>
     <button @click="close">close modal</button>
-  </vue-final-modal>
+  </v-modal>
 </template>
 
 <script>
@@ -34,7 +34,7 @@ export default {
 - 型別： `Any`
 - 預設： `{}`
 
-當你透過 [API](/zh-Hant/api) `$vfm.show(name, params)` 開啟 modal，你可以使用 scoped-slot 取得 params：
+當你透過 [API](/zh-Hant/api) `$modal.show(name, params)` 開啟 modal，你可以使用 scoped-slot 取得 params：
 
 ```html
 <template v-slot="{ params }">
diff --git a/docs/content/zh-Hant/options.md b/docs/content/zh-Hant/options.md
deleted file mode 100644
index 7ffc0ebc..00000000
--- a/docs/content/zh-Hant/options.md
+++ /dev/null
@@ -1,53 +0,0 @@
----
-title: 選項（Options）
-description: 'Vue Final Modal 是一個無渲染、可堆疊、可拆卸且輕巧的 modal 元件。'
-category: 快速入門
-position: 2
-version: 2
----
-
-Options 作為 `Vue.use` 的第二個參數。
-
-```js
-import VueFinalModal from 'vue-final-modal'
-
-Vue.use(VueFinalModal(), { 
-    componentName: 'VueFinalModal',
-    key: '$vfm',    
-    dynamicContainerName: 'ModalsContainer'
-})
-```
-
-或作為 `VueFinalModal` 的第一個參數。
-
-```js
-import VueFinalModal from 'vue-final-modal'
-
-Vue.use(VueFinalModal({ 
-    componentName: 'VueFinalModal',
-    key: '$vfm',    
-    dynamicContainerName: 'ModalsContainer'
-}))
-```
-
-## `componentName`
-
-- 型別： `String`
-- 預設： `'VueFinalModal'`
-
-自定義想要的元件名稱，預設為 `VueFinalModal`。
-
-## `key`
-
-- 型別： `String`
-- 預設： `'$vfm'`
-
-自定義存取 API 的 key，預設為 `$vfm`。
-<alert>如果建立了多個 `VueFinalModal` 實例，像是 spinner、toast、notify 等，這將會非常有幫助。</alert>
-
-## `dynamicContainerName`
-
-- 型別： `String`
-- 預設： `'ModalsContainer'`
-
-自定義動態 modals 容器元件名稱，預設為 `ModalsContainer`。
diff --git a/docs/content/zh-Hant/setup.md b/docs/content/zh-Hant/setup.md
index 0a40b505..178c0894 100644
--- a/docs/content/zh-Hant/setup.md
+++ b/docs/content/zh-Hant/setup.md
@@ -8,52 +8,97 @@ version: 2
 
 ## 安裝
 
-**Vue 3 使用 <badge>1.x.x</badge>、<badge>3.x.x</badge>**
+### **Vue 3**
 
 <code-group>
-  <code-block label="Yarn" active>
+  <code-block label="npm" active>
+
+```bash
+npm install vue-final-modal@next
+```
+
+  </code-block>
+  <code-block label="yarn">
 
 ```bash
 yarn add vue-final-modal@next
 ```
 
   </code-block>
-  <code-block label="NPM">
+  <code-block label="pnpm">
 
 ```bash
-npm install vue-final-modal@next
+pnpm add vue-final-modal@next
 ```
 
   </code-block>
 </code-group>
 
-**Vue 2 使用 <badge>0.x.x</badge>、<badge>2.x.x</badge>**
+### **Vue 2**
 
 <code-group>
-  <code-block label="Yarn" active>
+  <code-block label="npm" active>
+
+```bash
+npm install vue-final-modal@latest
+```
+
+  </code-block>
+  <code-block label="yarn">
 
 ```bash
 yarn add vue-final-modal@latest
 ```
 
   </code-block>
-  <code-block label="NPM">
+  <code-block label="pnpm">
 
 ```bash
-npm install vue-final-modal@latest
+pnpm add vue-final-modal@latest
 ```
 
   </code-block>
 </code-group>
 
-## 註冊
+## 按需求引入
+
+查看更多 [$modal](/api)、[VModal](/examples/liveDemo)、[VDynamicModals](/dynamic-modal) 的使用細節。
+
+```vue
+<script>
+import { $modal, VModal, VDynamicModals } from 'vue-final-modal'
+
+export default {
+  components: {
+    VModal,
+    VDynamicModals
+  }
+}
+</script>
+```
+
+## 全域註冊套件
+
+### `vfmPlugin`
 
-### Vue
+- 型別：`Function | PluginObject`
+- 參數：`Object`
+  - 預設：
+  ```js
+  {
+    key: '$modal',
+    name: 'VModal',
+    containerName: 'VDynamicModals'
+  }
+  ```
+- 回傳：`PluginObject`
+- 範例：
+### Vue 2
 
 ```js[main.js]
-import VueFinalModal from 'vue-final-modal'
+import { vfmPlugin } from 'vue-final-modal'
 
-Vue.use(VueFinalModal())
+Vue.use(vfmPlugin)
 ```
 
 ### Nuxt
@@ -61,9 +106,9 @@ Vue.use(VueFinalModal())
 - 新增一個 plugin **`vue-final-modal.js`**
 
 ```js[plugins/vue-final-modal.js]
-import VueFinalModal from 'vue-final-modal/lib'
+import { vfmPlugin } from 'vue-final-modal/lib'
 
-Vue.use(VueFinalModal())
+Vue.use(vfmPlugin)
 ```
 
 - **在 `nuxt.config.js` 的 plugin 與 build 中加入**
@@ -77,7 +122,7 @@ export default {
 }
 ```
 
-### CDN
+## CDN
 
 <alert>[Live demo](https://codepen.io/hunterliu1003/pen/ZEWoYeE)</alert>
 
diff --git a/docs/content/zh-Hant/typescript.md b/docs/content/zh-Hant/typescript.md
index d79e0f29..2bdbccdd 100644
--- a/docs/content/zh-Hant/typescript.md
+++ b/docs/content/zh-Hant/typescript.md
@@ -9,21 +9,22 @@ version: 2
 
 ## Vue
 
-不需要任何設定即可使用. 但如果你想要自己定義設定 [選項（options）](/zh-Hant/options), 你可以像這樣處理：
+不需要任何設定即可使用. 但如果你想要自己定義設定 [選項（options）](/zh-Hant/setup#vfmplugin), 你可以像這樣處理：
 
 ```ts[main.ts]
 import Vue from 'vue'
-import VueFinalModal, { VfmOptions, VueFinalModalProperty } from 'vue-final-modal'
+import { vfmPlugin, VfmOptions, $ModalProperty } from 'vue-final-modal'
 
-Vue.use<VfmOptions>(VueFinalModal(), {
-  componentName: 'VModal',
-  key: '$modal'
-})
+Vue.use<VfmOptions>(vfmPlugin({
+  key: '$modal',
+  name: 'VModal',
+  containerName: 'VDynamicModals'
+}))
 
 // define the setup options
 declare module 'vue/types/vue' {
   interface Vue {
-    $modal: VueFinalModalProperty
+    $modal: $ModalProperty
   }
 }
 ```
diff --git a/docs/plugins/global.js b/docs/plugins/global.js
index 03b6c36b..0f166763 100644
--- a/docs/plugins/global.js
+++ b/docs/plugins/global.js
@@ -1,8 +1,8 @@
 import Vue from 'vue'
 
-import VueFinalModal from '../../lib'
+import { vfmPlugin } from '../../lib'
 
-Vue.use(VueFinalModal())
+Vue.use(vfmPlugin)
 
 import components from '../components/examples'
 Object.keys(components).forEach(name => {
diff --git a/example/src/App.vue b/example/src/App.vue
index ca4cd92c..dc06e3e3 100644
--- a/example/src/App.vue
+++ b/example/src/App.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="app" class="p-4">
     <h2 class="text-3xl py-2">Options:</h2>
-    <BasicOptions />
+    <basic-options />
 
     <h2 class="text-3xl py-2">v-basic:</h2>
     <v-basic></v-basic>
@@ -32,7 +32,8 @@
     <h2 class="text-3xl py-2">Tailwind HOC Custom Transition Modal</h2>
     <hoc-example-tailwind-custom-transition></hoc-example-tailwind-custom-transition>
 
-    <modals-container></modals-container>
+    <v-dynamic-modals></v-dynamic-modals>
+
     <div v-for="i in 100" :key="i">{{ i }}</div>
   </div>
 </template>
diff --git a/example/src/components/basic/BasicOptions.vue b/example/src/components/basic/BasicOptions.vue
index 796e21c9..26dbd3cb 100644
--- a/example/src/components/basic/BasicOptions.vue
+++ b/example/src/components/basic/BasicOptions.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="pb-8">
-    <v-modal
+    <custom-modal
       v-model="showModal"
       :ssr="ssr"
       :lock-scroll="lockScroll"
@@ -31,7 +31,7 @@
     >
       <template v-slot:title># Hello, world!</template>
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
-    </v-modal>
+    </custom-modal>
 
     <div class="flex space-x-2">
       <v-button highlight @click="showModal = true">Open Modal</v-button>
diff --git a/example/src/components/basic/VAccessibility.vue b/example/src/components/basic/VAccessibility.vue
index 0574e2fc..94da8074 100644
--- a/example/src/components/basic/VAccessibility.vue
+++ b/example/src/components/basic/VAccessibility.vue
@@ -1,9 +1,9 @@
 <template>
   <div>
-    <v-modal v-model="show" @confirm="show = false" @cancel="show = false" focus-trap>
+    <custom-modal v-model="show" @confirm="show = false" @cancel="show = false" focus-trap>
       <template v-slot:title>Hello, vue-final-modal</template>
       <p>Vue Final Modal is a renderless, stackable, detachable and lightweight modal component.</p>
-    </v-modal>
+    </custom-modal>
 
     <v-button highlight @click="show = true">Open modal</v-button>
   </div>
diff --git a/example/src/components/basic/VActionButtons.vue b/example/src/components/basic/VActionButtons.vue
index 0048f7d8..b412047c 100644
--- a/example/src/components/basic/VActionButtons.vue
+++ b/example/src/components/basic/VActionButtons.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <vue-final-modal v-model="showModal" classes="modal-container" content-class="modal-content">
+    <v-modal v-model="showModal" classes="modal-container" content-class="modal-content">
       <button class="modal__close" @click="showModal = false">
         <mdi-close></mdi-close>
       </button>
@@ -14,7 +14,7 @@
         <v-button @click="showModal = false">confirm</v-button>
         <v-button @click="showModal = false">cancel</v-button>
       </div>
-    </vue-final-modal>
+    </v-modal>
     <v-button highlight @click="showModal = true">Open modal</v-button>
   </div>
 </template>
diff --git a/example/src/components/basic/VApiShow.vue b/example/src/components/basic/VApiShow.vue
index 000081ad..543b2249 100644
--- a/example/src/components/basic/VApiShow.vue
+++ b/example/src/components/basic/VApiShow.vue
@@ -1,10 +1,10 @@
 <template>
   <div>
-    <v-modal v-model="showModal" name="VApiShow" @confirm="showModal = false" @cancel="showModal = false">
+    <custom-modal v-model="showModal" name="VApiShow" @confirm="showModal = false" @cancel="showModal = false">
       <template v-slot="{ params }">Hi {{ params.userName }} </template>
-      <template v-slot:title>$vfm.show</template>
-    </v-modal>
-    <v-button highlight @click="$vfm.show('VApiShow', { userName: 'vue-final-modal' })">Open modal</v-button>
+      <template v-slot:title>$modal.show</template>
+    </custom-modal>
+    <v-button highlight @click="$modal.show('VApiShow', { userName: 'vue-final-modal' })">Open modal</v-button>
   </div>
 </template>
 
diff --git a/example/src/components/basic/VBackground.vue b/example/src/components/basic/VBackground.vue
index 028d701a..3e423a1e 100644
--- a/example/src/components/basic/VBackground.vue
+++ b/example/src/components/basic/VBackground.vue
@@ -1,8 +1,8 @@
 <template>
   <div>
-    <vue-final-modal v-model="showModal" content-class="modal-content">
+    <v-modal v-model="showModal" content-class="modal-content">
       <span class="modal__title">Hello, vue-final-modal</span>
-    </vue-final-modal>
+    </v-modal>
     <v-button highlight @click="showModal = true">Open modal</v-button>
   </div>
 </template>
diff --git a/example/src/components/basic/VBasic.vue b/example/src/components/basic/VBasic.vue
index f2716c32..78195a2d 100644
--- a/example/src/components/basic/VBasic.vue
+++ b/example/src/components/basic/VBasic.vue
@@ -1,8 +1,8 @@
 <template>
   <div>
-    <vue-final-modal v-model="showModal">
+    <v-modal v-model="showModal">
       <span class="modal__title">Hello, vue-final-modal</span>
-    </vue-final-modal>
+    </v-modal>
     <v-button highlight @click="showModal = true">Open modal</v-button>
   </div>
 </template>
diff --git a/example/src/components/basic/VCentered.vue b/example/src/components/basic/VCentered.vue
index 7d1b660f..ce6623fb 100644
--- a/example/src/components/basic/VCentered.vue
+++ b/example/src/components/basic/VCentered.vue
@@ -1,8 +1,8 @@
 <template>
   <div>
-    <vue-final-modal v-model="showModal" classes="modal-container" content-class="modal-content">
+    <v-modal v-model="showModal" classes="modal-container" content-class="modal-content">
       <span class="modal__title">Hello, vue-final-modal</span>
-    </vue-final-modal>
+    </v-modal>
     <v-button highlight @click="showModal = true">Open modal</v-button>
   </div>
 </template>
diff --git a/example/src/components/basic/VCloseButton.vue b/example/src/components/basic/VCloseButton.vue
index dcec55ab..1f5a8a1e 100644
--- a/example/src/components/basic/VCloseButton.vue
+++ b/example/src/components/basic/VCloseButton.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <vue-final-modal v-model="showModal" classes="modal-container" content-class="modal-content">
+    <v-modal v-model="showModal" classes="modal-container" content-class="modal-content">
       <button class="modal__close" @click="showModal = false">
         <mdi-close></mdi-close>
       </button>
@@ -8,7 +8,7 @@
       <div class="modal__content">
         <p>Vue Final Modal is a renderless, stackable, detachable and lightweight modal component.</p>
       </div>
-    </vue-final-modal>
+    </v-modal>
     <v-button highlight @click="showModal = true">Open modal</v-button>
   </div>
 </template>
diff --git a/example/src/components/basic/VContent.vue b/example/src/components/basic/VContent.vue
index 98b23c29..f2a3d0d1 100644
--- a/example/src/components/basic/VContent.vue
+++ b/example/src/components/basic/VContent.vue
@@ -1,11 +1,11 @@
 <template>
   <div>
-    <vue-final-modal v-model="showModal" classes="modal-container" content-class="modal-content">
+    <v-modal v-model="showModal" classes="modal-container" content-class="modal-content">
       <span class="modal__title">Hello, vue-final-modal</span>
       <div class="modal__content">
         <p>Vue Final Modal is a renderless, stackable, detachable and lightweight modal component.</p>
       </div>
-    </vue-final-modal>
+    </v-modal>
     <v-button highlight @click="showModal = true">Open modal</v-button>
   </div>
 </template>
diff --git a/example/src/components/basic/VDynamic.vue b/example/src/components/basic/VDynamic.vue
index 7717fad6..1aa2cc25 100644
--- a/example/src/components/basic/VDynamic.vue
+++ b/example/src/components/basic/VDynamic.vue
@@ -6,7 +6,7 @@
 export default {
   methods: {
     dynamic() {
-      this.$vfm.show({
+      this.$modal.show({
         component: 'VDynamicModal'
       })
     }
diff --git a/example/src/components/basic/VDynamicAdvanced.vue b/example/src/components/basic/VDynamicAdvanced.vue
index dc8f665e..a08d8549 100644
--- a/example/src/components/basic/VDynamicAdvanced.vue
+++ b/example/src/components/basic/VDynamicAdvanced.vue
@@ -8,13 +8,13 @@ import VDescription from '../VDescription.vue'
 export default {
   methods: {
     dynamic() {
-      this.$vfm.show({
-        component: 'VModal',
+      this.$modal.show({
+        component: 'CustomModal',
         bind: {
           name: 'VDynamicAdvacedModal'
         },
         on: {
-          // event by v-modal
+          // event by custom-modal
           confirm(close) {
             console.log('confirm')
             close()
diff --git a/example/src/components/basic/VDynamicModal.vue b/example/src/components/basic/VDynamicModal.vue
index 5f26f4a6..9b26d80e 100644
--- a/example/src/components/basic/VDynamicModal.vue
+++ b/example/src/components/basic/VDynamicModal.vue
@@ -1,11 +1,5 @@
 <template>
-  <vue-final-modal
-    v-slot="{ close }"
-    v-bind="$attrs"
-    classes="modal-container"
-    content-class="modal-content"
-    v-on="$listeners"
-  >
+  <v-modal v-slot="{ close }" v-bind="$attrs" classes="modal-container" content-class="modal-content" v-on="$listeners">
     <button class="modal__close" @click="close">
       <mdi-close></mdi-close>
     </button>
@@ -13,7 +7,7 @@
     <div class="modal__content">
       <p>Vue Final Modal is a renderless, stackable, detachable and lightweight modal component.</p>
     </div>
-  </vue-final-modal>
+  </v-modal>
 </template>
 
 <script>
diff --git a/example/src/components/basic/VEvents.vue b/example/src/components/basic/VEvents.vue
index 887fa072..95994bc4 100644
--- a/example/src/components/basic/VEvents.vue
+++ b/example/src/components/basic/VEvents.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <v-modal
+    <custom-modal
       v-model="showModal"
       @click-outside="clickOutside"
       @before-open="beforeOpen"
@@ -10,7 +10,7 @@
       @cancel="showModal = false"
     >
       <template v-slot:title>Events Example!</template>
-    </v-modal>
+    </custom-modal>
     <v-button highlight @click="showModal = true">Open modal</v-button>
   </div>
 </template>
diff --git a/example/src/components/basic/VParams.vue b/example/src/components/basic/VParams.vue
index 17f71c06..d5fb0baf 100644
--- a/example/src/components/basic/VParams.vue
+++ b/example/src/components/basic/VParams.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <vue-final-modal
+    <v-modal
       v-model="showModal"
       name="stackable"
       classes="modal-container"
@@ -9,7 +9,7 @@
       @closed="e => e.stop()"
     >
       <template v-slot="{ params }">
-        <button class="modal__close" @click="$vfm.hide('stackable')">
+        <button class="modal__close" @click="$modal.hide('stackable')">
           <mdi-close></mdi-close>
         </button>
         <span class="modal__title">{{ params.test }} Hello, vue-final-modal</span>
@@ -19,15 +19,15 @@
           </p>
         </div>
         <div class="modal__action">
-          <v-button @click="$vfm.hide('stackable')">confirm</v-button>
-          <v-button @click="$vfm.hide('stackable')">cancel</v-button>
+          <v-button @click="$modal.hide('stackable')">confirm</v-button>
+          <v-button @click="$modal.hide('stackable')">cancel</v-button>
         </div>
       </template>
-    </vue-final-modal>
-    <v-button @click="$vfm.show('stackable', { test: 123 })">Show modal with params</v-button>
-    <v-button @click="$vfm.toggle('stackable', null, { test: 321 })">Toggle modal with params</v-button>
-    <v-button @click="$vfm.show('stackable')">Show modal</v-button>
-    <v-button @click="$vfm.hide('stackable')">Hide modal</v-button>
+    </v-modal>
+    <v-button @click="$modal.show('stackable', { test: 123 })">Show modal with params</v-button>
+    <v-button @click="$modal.toggle('stackable', null, { test: 321 })">Toggle modal with params</v-button>
+    <v-button @click="$modal.show('stackable')">Show modal</v-button>
+    <v-button @click="$modal.hide('stackable')">Hide modal</v-button>
   </div>
 </template>
 
diff --git a/example/src/components/basic/VScrollable.vue b/example/src/components/basic/VScrollable.vue
index e7a3a2f5..19de8c60 100644
--- a/example/src/components/basic/VScrollable.vue
+++ b/example/src/components/basic/VScrollable.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <vue-final-modal v-model="showModal" classes="modal-container" content-class="modal-content">
+    <v-modal v-model="showModal" classes="modal-container" content-class="modal-content">
       <button class="modal__close" @click="showModal = false">
         <mdi-close></mdi-close>
       </button>
@@ -10,7 +10,7 @@
           Vue Final Modal is a renderless, stackable, detachable and lightweight modal component.
         </p>
       </div>
-    </vue-final-modal>
+    </v-modal>
     <v-button highlight @click="showModal = true">Open modal</v-button>
   </div>
 </template>
diff --git a/example/src/components/basic/VStackable.vue b/example/src/components/basic/VStackable.vue
index b01344f3..2d76959e 100644
--- a/example/src/components/basic/VStackable.vue
+++ b/example/src/components/basic/VStackable.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <!-- First modal -->
-    <vue-final-modal v-model="showModal" classes="modal-container" content-class="modal-content">
+    <v-modal v-model="showModal" classes="modal-container" content-class="modal-content">
       <button class="modal__close" @click="showModal = false">
         <mdi-close></mdi-close>
       </button>
@@ -15,10 +15,10 @@
         <v-button highlight @click="showConfirmModal = true">confirm</v-button>
         <v-button @click="showModal = false">cancel</v-button>
       </div>
-    </vue-final-modal>
+    </v-modal>
 
     <!-- Second modal -->
-    <vue-final-modal v-model="showConfirmModal" classes="modal-container" content-class="modal-content">
+    <v-modal v-model="showConfirmModal" classes="modal-container" content-class="modal-content">
       <button class="modal__close" @click="showConfirmModal = false">
         <mdi-close></mdi-close>
       </button>
@@ -28,7 +28,7 @@
         <v-button @click="confirm">confirm</v-button>
         <v-button @click="showConfirmModal = false">cancel</v-button>
       </div>
-    </vue-final-modal>
+    </v-modal>
 
     <v-button highlight @click="showModal = true">Open modal</v-button>
   </div>
diff --git a/example/src/components/basic/VStopBeforeClose.vue b/example/src/components/basic/VStopBeforeClose.vue
index fee030ce..a359ecc8 100644
--- a/example/src/components/basic/VStopBeforeClose.vue
+++ b/example/src/components/basic/VStopBeforeClose.vue
@@ -1,11 +1,6 @@
 <template>
   <div>
-    <vue-final-modal
-      v-model="showModal"
-      classes="modal-container"
-      content-class="modal-content"
-      @before-close="e => e.stop()"
-    >
+    <v-modal v-model="showModal" classes="modal-container" content-class="modal-content" @before-close="e => e.stop()">
       <button class="modal__close" @click="showModal = false">
         <mdi-close></mdi-close>
       </button>
@@ -19,7 +14,7 @@
         <v-button @click="showModal = false">confirm</v-button>
         <v-button @click="showModal = false">cancel</v-button>
       </div>
-    </vue-final-modal>
+    </v-modal>
     <v-button highlight @click="showModal = true">Open modal</v-button>
   </div>
 </template>
diff --git a/example/src/components/basic/VStopBeforeOpen.vue b/example/src/components/basic/VStopBeforeOpen.vue
index 9febd256..3f28bacd 100644
--- a/example/src/components/basic/VStopBeforeOpen.vue
+++ b/example/src/components/basic/VStopBeforeOpen.vue
@@ -1,11 +1,6 @@
 <template>
   <div>
-    <vue-final-modal
-      v-model="showModal"
-      classes="modal-container"
-      content-class="modal-content"
-      @before-open="e => e.stop()"
-    >
+    <v-modal v-model="showModal" classes="modal-container" content-class="modal-content" @before-open="e => e.stop()">
       <button class="modal__close" @click="showModal = false">
         <mdi-close></mdi-close>
       </button>
@@ -19,7 +14,7 @@
         <v-button @click="showModal = false">confirm</v-button>
         <v-button @click="showModal = false">cancel</v-button>
       </div>
-    </vue-final-modal>
+    </v-modal>
     <v-button highlight @click="showModal = true">Open modal</v-button>
   </div>
 </template>
diff --git a/example/src/components/hoc/VModal.vue b/example/src/components/hoc/CustomModal.vue
similarity index 96%
rename from example/src/components/hoc/VModal.vue
rename to example/src/components/hoc/CustomModal.vue
index b21855ba..1d20a8e8 100644
--- a/example/src/components/hoc/VModal.vue
+++ b/example/src/components/hoc/CustomModal.vue
@@ -1,5 +1,5 @@
 <template>
-  <vue-final-modal
+  <v-modal
     v-slot="{ params, close }"
     v-bind="$attrs"
     classes="modal-container"
@@ -19,12 +19,12 @@
     <button class="modal__close" @click="close">
       <mdi-close></mdi-close>
     </button>
-  </vue-final-modal>
+  </v-modal>
 </template>
 
 <script>
 export default {
-  name: 'VModal',
+  name: 'CustomModal',
   inheritAttrs: false
 }
 </script>
diff --git a/example/src/components/hoc/HocExample.vue b/example/src/components/hoc/HocExample.vue
index 3118e9e1..40053e7f 100644
--- a/example/src/components/hoc/HocExample.vue
+++ b/example/src/components/hoc/HocExample.vue
@@ -1,9 +1,9 @@
 <template>
   <div>
-    <v-modal v-model="show" @confirm="confirm" @cancel="cancel">
+    <custom-modal v-model="show" @confirm="confirm" @cancel="cancel">
       <template v-slot:title>Hello, vue-final-modal</template>
       <p>Vue Final Modal is a renderless, stackable, detachable and lightweight modal component.</p>
-    </v-modal>
+    </custom-modal>
 
     <v-button highlight @click="show = true">Open modal</v-button>
   </div>
diff --git a/example/src/components/hoc/VTailwindModal.vue b/example/src/components/hoc/VTailwindModal.vue
index ce045edb..4749f213 100644
--- a/example/src/components/hoc/VTailwindModal.vue
+++ b/example/src/components/hoc/VTailwindModal.vue
@@ -1,5 +1,5 @@
 <template>
-  <vue-final-modal
+  <v-modal
     v-slot="{ params, close }"
     v-bind="$attrs"
     classes="flex justify-center items-center"
@@ -19,7 +19,7 @@
     <button class="absolute top-0 right-0 mt-2 mr-2" @click="close">
       <mdi-close></mdi-close>
     </button>
-  </vue-final-modal>
+  </v-modal>
 </template>
 
 <script>
diff --git a/example/src/main.js b/example/src/main.js
index b236eb10..f76c6c5a 100644
--- a/example/src/main.js
+++ b/example/src/main.js
@@ -3,13 +3,14 @@ import App from './App.vue'
 import 'virtual:windi.css'
 
 import VDynamicModal from './components/basic/VDynamicModal.vue'
-import VModal from './components/hoc/VModal.vue'
+import CustomModal from './components/hoc/CustomModal.vue'
 import VTitle from './components/VTitle.vue'
-import VueFinalModal from 'vue-final-modal'
 
-Vue.use(VueFinalModal())
+import { vfmPlugin } from 'vue-final-modal'
+Vue.use(vfmPlugin)
+
 Vue.component('VDynamicModal', VDynamicModal)
-Vue.component('VModal', VModal)
+Vue.component('CustomModal', CustomModal)
 Vue.component('VTitle', VTitle)
 
 Vue.config.productionTip = false
diff --git a/lib/Plugin.js b/lib/Plugin.js
index 502f663a..8fc9c303 100644
--- a/lib/Plugin.js
+++ b/lib/Plugin.js
@@ -1,37 +1,54 @@
-import { bindPrototype, registModal, registContainer } from './PluginCore'
-import { DUPLICATE_KEY, DUPLICATE_COMPONENT, DUPLICATE_DYNAMIC_CONTAINER } from './utils/errors'
-
-const defaultOptions = {
-  componentName: 'VueFinalModal',
-  dynamicContainerName: 'ModalsContainer',
-  key: '$vfm'
+import { createApi, createModal, createContainer } from './PluginCore'
+
+/**
+ * @description Ensure that `_vfm` is used when function `installPlugin` is executed for the first time
+ */
+let _count = 0
+
+const _key = '$modal'
+const _name = 'VModal'
+const _containerName = 'VDynamicModals'
+
+/**
+ * @description Support create multiple vfm instance
+ */
+export const createVfm = () => {
+  let api = createApi()
+  return {
+    [_key]: api,
+    [_name]: createModal(api),
+    [_containerName]: createContainer(api)
+  }
 }
 
-const validPlugin = (duplicateKey, duplicateComponent, duplicateDynamicContainer) => {
-  if (!(duplicateKey || duplicateComponent || duplicateDynamicContainer)) return true
-
-  if (typeof window === 'undefined') return false
-
-  duplicateKey && console.error(DUPLICATE_KEY)
-  duplicateComponent && console.error(DUPLICATE_COMPONENT)
-  duplicateDynamicContainer && console.error(DUPLICATE_DYNAMIC_CONTAINER)
-
-  return false
+/**
+ * @description Create a vfm instance by default for directly support `import { $modal, VModal, VDynamicModals } from 'vue-final-modal'`
+ */
+const _vfm = createVfm()
+export const { $modal, VModal, VDynamicModals } = _vfm
+
+/**
+ * @description Register vfm instance globally
+ */
+export const installVfm = (Vue, options = {}) => {
+  const { $modal, VModal, VDynamicModals } = _count === 0 ? _vfm : createVfm()
+  _count += 1
+  const key = options[_key] || _key
+  const name = options[_name] || _name
+  const containerName = options[_containerName] || _containerName
+  Vue.prototype[key] = $modal
+  Vue.component(name, VModal)
+  Vue.component(containerName, VDynamicModals)
 }
 
-const Plugin = pluginOptions => ({
+/**
+ * @description Vue plugin for register vfm instance globally
+ */
+export const vfmPlugin = pluginOptions => ({
   install(Vue, options) {
-    const _options = Object.assign({}, defaultOptions, pluginOptions, options)
-    const duplicateKey = Vue.prototype[_options.key]
-    const duplicateComponent = Vue.options.components[_options.componentName]
-    const duplicateDynamicContainer = Vue.options.components[_options.dynamicContainerName]
-
-    if (validPlugin(duplicateKey, duplicateComponent, duplicateDynamicContainer)) {
-      bindPrototype(Vue, _options)
-      registModal(Vue, _options)
-      registContainer(Vue, _options)
-    }
+    const _options = Object.assign({}, pluginOptions, options)
+    installVfm(Vue, _options)
   }
 })
 
-export default Plugin
+vfmPlugin.install = installVfm
diff --git a/lib/PluginCore.js b/lib/PluginCore.js
index bec74234..acda4080 100644
--- a/lib/PluginCore.js
+++ b/lib/PluginCore.js
@@ -1,78 +1,73 @@
-import VueFinalModal from './VueFinalModal.vue'
-import ModalsContainer from './ModalsContainer.vue'
+import Vue from 'vue'
+import VModal from './VModal.vue'
+import VDynamicModals from './VDynamicModals.vue'
 
-function assignOptions(component, options) {
-  const _component = { ...component }
-  Object.assign(_component.props, {
-    $_options: { type: Object, default: () => options }
-  })
-  return _component
-}
-
-function createVfm(Vue, options) {
-  let vfm
+export function createApi() {
+  let _modalComponent = null
 
-  return function() {
-    vfm = {
-      show(modal, ...args) {
-        switch (typeof modal) {
-          case 'string':
-            return this.toggle(modal, true, ...args)
-          case 'object': {
-            return Promise.allSettled([
-              new Promise((resolve, reject) => {
-                const defaultModal = {
-                  value: true,
-                  id: Symbol('dynamicModal'),
-                  component: options.componentName,
-                  bind: {},
-                  slots: {},
-                  on: {},
-                  params: args[0],
-                  reject,
-                  opened() {
-                    resolve('show')
-                  }
+  return Vue.observable({
+    show(modal, ...args) {
+      switch (typeof modal) {
+        case 'string':
+          return this.toggle(modal, true, ...args)
+        case 'object': {
+          return Promise.allSettled([
+            new Promise((resolve, reject) => {
+              const defaultModal = {
+                value: true,
+                id: Symbol('dynamicModal'),
+                component: _modalComponent,
+                bind: {},
+                slots: {},
+                on: {},
+                params: args[0],
+                reject,
+                opened() {
+                  resolve('show')
                 }
-                this.dynamicModals.push(Object.assign(defaultModal, modal))
-              })
-            ])
-          }
+              }
+              this.dynamicModals.push(Object.assign(defaultModal, modal))
+            })
+          ])
         }
-      },
-      hide(...names) {
-        return this.toggle(names, false)
-      },
-      hideAll() {
-        return this.hide(...this.openedModals.map(modal => modal.name))
-      },
-      toggle(name, ...args) {
-        const modals = Array.isArray(name) ? this.get(...name) : this.get(name)
-        return Promise.allSettled(modals.map(modal => modal.toggle(...args)))
-      },
-      get(...names) {
-        return this.modals.filter(modal => names.includes(modal.name))
-      },
-      dynamicModals: [],
-      openedModals: [],
-      modals: []
+      }
+    },
+    hide(...names) {
+      return this.toggle(names, false)
+    },
+    hideAll() {
+      return this.hide(...this.openedModals.map(modal => modal.name))
+    },
+    toggle(name, ...args) {
+      const modals = Array.isArray(name) ? this.get(...name) : this.get(name)
+      return Promise.allSettled(modals.map(modal => modal.toggle(...args)))
+    },
+    get(...names) {
+      return this.modals.filter(modal => names.includes(modal.name))
+    },
+    dynamicModals: [],
+    openedModals: [],
+    modals: [],
+    _setDefaultModal(modalComponent) {
+      _modalComponent = modalComponent
     }
-    return Vue.observable(vfm)
-  }
+  })
 }
 
-export function bindPrototype(Vue, options) {
-  const vfm = createVfm(Vue, options)()
-  Object.defineProperty(Vue.prototype, options.key, {
-    get() {
-      return vfm
-    }
+export function bindApi(component, api) {
+  const _component = { ...component, props: { ...component.props } }
+  Object.assign(_component.props, {
+    api: { type: Object, default: () => api }
   })
+  return _component
 }
 
-export function registModal(Vue, options) {
-  Vue.component(options.componentName, assignOptions(VueFinalModal, options))
+export function createModal(api) {
+  const modalComponent = bindApi(VModal, api)
+  api._setDefaultModal(modalComponent)
+  return modalComponent
 }
-export function registContainer(Vue, options) {
-  Vue.component(options.dynamicContainerName, assignOptions(ModalsContainer, options))
+
+export function createContainer(api) {
+  return bindApi(VDynamicModals, api)
 }
diff --git a/lib/ModalsContainer.vue b/lib/VDynamicModals.vue
similarity index 90%
rename from lib/ModalsContainer.vue
rename to lib/VDynamicModals.vue
index f965e8b6..81ca0fdc 100644
--- a/lib/ModalsContainer.vue
+++ b/lib/VDynamicModals.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="modals-container">
+  <div class="v-dynamic-modals">
     <component
       v-for="(modal, index) in api.dynamicModals"
       :key="modal.id"
@@ -22,11 +22,6 @@
 <script>
 export default {
   props: {},
-  computed: {
-    api() {
-      return this[this.$_options.key]
-    }
-  },
   methods: {
     slice(index) {
       this.api.dynamicModals.splice(index, 1)
diff --git a/lib/VueFinalModal.vue b/lib/VModal.vue
similarity index 99%
rename from lib/VueFinalModal.vue
rename to lib/VModal.vue
index b4f825f2..6afd3b45 100644
--- a/lib/VueFinalModal.vue
+++ b/lib/VModal.vue
@@ -184,9 +184,6 @@ export default {
     lastMousedownEl: null
   }),
   computed: {
-    api() {
-      return this[this.$_options.key]
-    },
     isComponentReadyToBeDestroyed() {
       return (
         (this.hideOverlay || this.overlayTransitionState === TransitionState.Leave) &&
diff --git a/lib/index.js b/lib/index.js
index d61d1506..d8f49e26 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -1,3 +1 @@
-import Plugin from './Plugin'
-
-export default Plugin
+export * from './Plugin'
diff --git a/lib/utils/errors.js b/lib/utils/errors.js
deleted file mode 100644
index 2df115e2..00000000
--- a/lib/utils/errors.js
+++ /dev/null
@@ -1,6 +0,0 @@
-export const DUPLICATE_KEY = '[vue-final-modal] Duplicate registration API key of VueFinalModal.'
-
-export const DUPLICATE_COMPONENT = '[vue-final-modal] Duplicate registration componentName of VueFinalModal.'
-
-export const DUPLICATE_DYNAMIC_CONTAINER =
-  '[vue-final-modal] Duplicate registration dynamicContainerName of ModalsContainer.'
diff --git a/package.json b/package.json
index 66cafbf1..f76d8cfa 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,8 @@
     "@babel/core": "^7.11.6",
     "@babel/preset-env": "^7.11.5",
     "@rollup/plugin-babel": "^5.2.2",
+    "@rollup/plugin-commonjs": "^19.0.0",
+    "@rollup/plugin-node-resolve": "^13.0.0",
     "@vue/eslint-config-prettier": "^6.0.0",
     "@vue/test-utils": "^1.1.2",
     "autoprefixer": "^9.8.6",
@@ -41,10 +43,8 @@
     "eslint-plugin-vue": "^7.8.0",
     "jest": "^24.9.0",
     "lint-staged": "^10.5.4",
-    "rollup": "^2.44.0",
+    "rollup": "^2.51.0",
     "rollup-plugin-cleanup": "^3.2.1",
-    "rollup-plugin-commonjs": "^10.1.0",
-    "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-vue": "^5.1.9",
     "vue-jest": "^3.0.5",
@@ -74,6 +74,7 @@
     "nuxt",
     "modal",
     "dialog",
+    "v-modal",
     "vue-final-modal",
     "vue-modal",
     "vue-dialog",
diff --git a/rollup.config.js b/rollup.config.js
index 41055899..8a63ec56 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -1,7 +1,7 @@
 import VuePlugin from 'rollup-plugin-vue'
 import babel from '@rollup/plugin-babel'
-import resolve from 'rollup-plugin-node-resolve'
-import commonJS from 'rollup-plugin-commonjs'
+import { nodeResolve } from '@rollup/plugin-node-resolve'
+import commonJS from '@rollup/plugin-commonjs'
 import { terser } from 'rollup-plugin-terser'
 import cleanup from 'rollup-plugin-cleanup'
 import sizes from '@atomico/rollup-plugin-sizes'
@@ -10,7 +10,7 @@ import autoprefixer from 'autoprefixer'
 const pkg = require('./package.json')
 
 const plugins = [
-  resolve(),
+  nodeResolve(),
   commonJS(),
   VuePlugin({
     normalizer: '~vue-runtime-helpers/dist/normalize-component.js',
@@ -35,7 +35,10 @@ export default {
       file: pkg.main,
       format: 'umd',
       name: 'VueFinalModal',
-      sourcemap: true
+      sourcemap: true,
+      globals: {
+        vue: 'Vue'
+      }
     },
     {
       file: pkg.module,
@@ -43,5 +46,6 @@ export default {
       sourcemap: true
     }
   ],
+  external: ['vue'],
   plugins
 }
diff --git a/tests/unit/Plugin.spec.js b/tests/unit/Plugin.spec.js
index 36617721..d7fa54fc 100644
--- a/tests/unit/Plugin.spec.js
+++ b/tests/unit/Plugin.spec.js
@@ -1,79 +1,16 @@
 import { createLocalVue, enableAutoDestroy } from '@vue/test-utils'
-import VueFinalModal from '../../lib'
-import { DUPLICATE_KEY, DUPLICATE_COMPONENT, DUPLICATE_DYNAMIC_CONTAINER } from '../../lib/utils/errors'
+import { vfmPlugin } from '../../lib'
 
 enableAutoDestroy(afterEach)
 
-const createSpyError = () => {
-  global.console.error = jest.fn()
-  return jest.spyOn(global.console, 'error')
-}
-
 describe('Plugin', () => {
-  it('duplicate all', () => {
-    const spy = createSpyError()
-    const localVue = createLocalVue()
-    localVue.use(VueFinalModal())
-    localVue.use(VueFinalModal())
-    expect(spy).toHaveBeenNthCalledWith(1, DUPLICATE_KEY)
-    expect(spy).toHaveBeenNthCalledWith(2, DUPLICATE_COMPONENT)
-    expect(spy).toHaveBeenNthCalledWith(3, DUPLICATE_DYNAMIC_CONTAINER)
-  })
-  it('duplicate key only', () => {
-    const spy = createSpyError()
-    const localVue = createLocalVue()
-    localVue.use(VueFinalModal())
-    localVue.use(
-      VueFinalModal({
-        componentName: 'VueFinalTest',
-        dynamicContainerName: 'TestContainer'
-      })
-    )
-    expect(spy).toHaveBeenCalledTimes(1)
-  })
-  it('duplicate component', () => {
-    const spy = createSpyError()
-    const localVue = createLocalVue()
-    localVue.use(VueFinalModal())
-    localVue.use(
-      VueFinalModal({
-        dynamicContainerName: 'TestContainer'
-      })
-    )
-    expect(spy).toHaveBeenNthCalledWith(1, DUPLICATE_KEY)
-    expect(spy).toHaveBeenNthCalledWith(2, DUPLICATE_COMPONENT)
-  })
-  it('duplicate container', () => {
-    const spy = createSpyError()
-    const localVue = createLocalVue()
-    localVue.use(VueFinalModal())
-    localVue.use(
-      VueFinalModal({
-        componentName: 'VueFinalTest'
-      })
-    )
-    expect(spy).toHaveBeenNthCalledWith(1, DUPLICATE_KEY)
-    expect(spy).toHaveBeenNthCalledWith(2, DUPLICATE_DYNAMIC_CONTAINER)
-  })
-  it('different key', () => {
-    const spy = createSpyError()
-    const localVue = createLocalVue()
-    localVue.use(VueFinalModal())
-    localVue.use(
-      VueFinalModal({
-        key: 'vft'
-      })
-    )
-    expect(spy).toHaveBeenNthCalledWith(1, DUPLICATE_COMPONENT)
-    expect(spy).toHaveBeenNthCalledWith(2, DUPLICATE_DYNAMIC_CONTAINER)
-  })
   it('window is undefined in node server', () => {
     Object.defineProperty(global, 'window', { value: undefined })
     global.console.error = jest.fn()
     const spy = jest.spyOn(global.console, 'error')
     const localVue = createLocalVue()
-    localVue.use(VueFinalModal())
-    localVue.use(VueFinalModal())
+    localVue.use(vfmPlugin)
+    localVue.use(vfmPlugin)
     expect(spy).toHaveBeenCalledTimes(0)
   })
 })
diff --git a/tests/unit/VueFinalModal.spec.js b/tests/unit/VueFinalModal.spec.js
index 253b539b..419a7045 100644
--- a/tests/unit/VueFinalModal.spec.js
+++ b/tests/unit/VueFinalModal.spec.js
@@ -3,7 +3,7 @@ import { afterTransition, createClosedModal, createOpenedModal, initDynamicModal
 
 enableAutoDestroy(afterEach)
 
-describe('VueFinalModal.vue', () => {
+describe('VModal.vue', () => {
   describe('default props', () => {
     it('value', async () => {
       const { wrapper } = await createOpenedModal()
@@ -311,31 +311,31 @@ describe('VueFinalModal.vue', () => {
 
   describe('API', () => {
     it('show static modal', async () => {
-      const { wrapper, $vfm } = await createClosedModal({
+      const { wrapper, $modal } = await createClosedModal({
         name: 'testModal'
       })
-      await $vfm.show('testModal')
+      await $modal.show('testModal')
       expect(wrapper.find('.vfm').isVisible()).toBe(true)
     })
     it('show dynamic modal', async () => {
-      const { wrapper, $vfm } = await initDynamicModal()
+      const { wrapper, $modal } = await initDynamicModal()
       const dynamicOptions = {}
-      await $vfm.show(dynamicOptions)
+      await $modal.show(dynamicOptions)
       expect(wrapper.find('.vfm').exists()).toBe(true)
     })
     it('show dynamic modal with string slot', async () => {
-      const { wrapper, $vfm } = await initDynamicModal()
-      const string = 'testVueFinalModal'
+      const { wrapper, $modal } = await initDynamicModal()
+      const string = 'testVModal'
       const dynamicOptions = {
         slots: {
           default: string
         }
       }
-      await $vfm.show(dynamicOptions)
+      await $modal.show(dynamicOptions)
       expect(wrapper.find('.vfm').html()).toContain(string)
     })
     it('stop show dynamic modal', async () => {
-      const { wrapper, $vfm } = await initDynamicModal()
+      const { wrapper, $modal } = await initDynamicModal()
       const dynamicOptions = {
         on: {
           'before-open'(e) {
@@ -343,25 +343,25 @@ describe('VueFinalModal.vue', () => {
           }
         }
       }
-      await $vfm.show(dynamicOptions)
+      await $modal.show(dynamicOptions)
       expect(wrapper.find('.vfm').exists()).toBe(false)
     })
     it('hide modal', async () => {
-      const { wrapper, $vfm } = await createOpenedModal({
+      const { wrapper, $modal } = await createOpenedModal({
         name: 'testModal'
       })
-      await $vfm.hide('testModal')
+      await $modal.hide('testModal')
       expect(wrapper.find('.vfm').isVisible()).toBe(false)
     })
     it('hide modals', async () => {
-      const { wrapper, $vfm } = await initDynamicModal()
-      await $vfm.show({ bind: { name: 'modal1' } })
-      await $vfm.show({ bind: { name: 'modal2' } })
-      await $vfm.hide('modal1', 'modal2')
+      const { wrapper, $modal } = await initDynamicModal()
+      await $modal.show({ bind: { name: 'modal1' } })
+      await $modal.show({ bind: { name: 'modal2' } })
+      await $modal.hide('modal1', 'modal2')
       expect(wrapper.find('.vfm').exists()).toBe(false)
     })
     it('stop hide modal', async () => {
-      const { wrapper, $vfm } = await initDynamicModal()
+      const { wrapper, $modal } = await initDynamicModal()
       const dynamicOptions = {
         bind: {
           name: 'modal1'
@@ -372,42 +372,42 @@ describe('VueFinalModal.vue', () => {
           }
         }
       }
-      await $vfm.show(dynamicOptions)
-      await $vfm.hide('modal1')
+      await $modal.show(dynamicOptions)
+      await $modal.hide('modal1')
       expect(wrapper.find('.vfm').exists()).toBe(true)
     })
     it('hide all modals', async () => {
-      const { wrapper, $vfm } = await initDynamicModal()
-      await $vfm.show({ bind: { name: 'modal1' } })
-      await $vfm.show({ bind: { name: 'modal2' } })
-      await $vfm.hideAll()
+      const { wrapper, $modal } = await initDynamicModal()
+      await $modal.show({ bind: { name: 'modal1' } })
+      await $modal.show({ bind: { name: 'modal2' } })
+      await $modal.hideAll()
       expect(wrapper.find('.vfm').exists()).toBe(false)
     })
     it('toggle opened modal', async () => {
-      const { wrapper, $vfm } = await createOpenedModal({
+      const { wrapper, $modal } = await createOpenedModal({
         name: 'testModal'
       })
-      await $vfm.toggle('testModal', false)
+      await $modal.toggle('testModal', false)
       expect(wrapper.find('.vfm').isVisible()).toBe(false)
     })
     it('toggle closed modal', async () => {
-      const { wrapper, $vfm } = await createClosedModal({
+      const { wrapper, $modal } = await createClosedModal({
         name: 'testModal'
       })
-      await $vfm.toggle('testModal', true)
+      await $modal.toggle('testModal', true)
       expect(wrapper.find('.vfm').isVisible()).toBe(true)
     })
     it('toggle dynamic modal', async () => {
-      const { wrapper, $vfm } = await initDynamicModal()
-      await $vfm.show({ bind: { name: 'testModal' } })
-      await $vfm.toggle('testModal')
+      const { wrapper, $modal } = await initDynamicModal()
+      await $modal.show({ bind: { name: 'testModal' } })
+      await $modal.toggle('testModal')
       expect(wrapper.find('.vfm').exists()).toBe(false)
     })
     it('get modals', async () => {
-      const { $vfm } = await initDynamicModal()
-      await $vfm.show({ bind: { name: 'testModal1' } })
-      await $vfm.show({ bind: { name: 'testModal2' } })
-      expect($vfm.get('testModal1').length).toBe(1)
+      const { $modal } = await initDynamicModal()
+      await $modal.show({ bind: { name: 'testModal1' } })
+      await $modal.show({ bind: { name: 'testModal2' } })
+      expect($modal.get('testModal1').length).toBe(1)
     })
   })
 
@@ -478,7 +478,7 @@ describe('VueFinalModal.vue', () => {
     })
 
     it('avoid modal reset params after modal was closed', async () => {
-      const { wrapper, $vfm } = await createClosedModal(
+      const { wrapper, $modal } = await createClosedModal(
         {
           name: 'testModal'
         },
@@ -491,8 +491,8 @@ describe('VueFinalModal.vue', () => {
       const params = {
         test: 123
       }
-      await $vfm.show('testModal', params)
-      await $vfm.hide('testModal')
+      await $modal.show('testModal', params)
+      await $modal.hide('testModal')
       expect(wrapper.vm.params === params).toBe(true)
     })
   })
diff --git a/tests/unit/utils.js b/tests/unit/utils.js
index dce8519a..666cc5e8 100644
--- a/tests/unit/utils.js
+++ b/tests/unit/utils.js
@@ -1,5 +1,5 @@
 import { createLocalVue, mount } from '@vue/test-utils'
-import VueFinalModal from '../../lib'
+import { vfmPlugin } from '../../lib'
 
 export function afterTransition(transitionDelay = 60) {
   return new Promise(resolve => {
@@ -17,13 +17,13 @@ export const transitionStub = () => ({
 
 export function createOpenedModal(propsData = {}, listeners = {}, mountingOptions = {}) {
   const localVue = createLocalVue()
-  localVue.use(VueFinalModal())
+  localVue.use(vfmPlugin)
   return new Promise(resolve => {
     const elem = document.createElement('div')
     if (document.body) {
       document.body.appendChild(elem)
     }
-    const wrapper = mount(localVue.options.components.VueFinalModal, {
+    const wrapper = mount(localVue.options.components.VModal, {
       stubs: false,
       localVue,
       propsData: {
@@ -39,7 +39,7 @@ export function createOpenedModal(propsData = {}, listeners = {}, mountingOption
           if (listeners.opened) {
             listeners.opened()
           }
-          resolve({ wrapper, localVue, $vfm: localVue.prototype.$vfm })
+          resolve({ wrapper, localVue, $modal: localVue.prototype.$modal })
         }
       },
       attachTo: elem,
@@ -49,9 +49,9 @@ export function createOpenedModal(propsData = {}, listeners = {}, mountingOption
 }
 export function createClosedModal(propsData = {}, listeners = {}, mountingOptions = {}, stubs = false) {
   const localVue = createLocalVue()
-  localVue.use(VueFinalModal())
+  localVue.use(vfmPlugin)
   return new Promise(resolve => {
-    const wrapper = mount(localVue.options.components.VueFinalModal, {
+    const wrapper = mount(localVue.options.components.VModal, {
       stubs,
       localVue,
       propsData: {
@@ -66,19 +66,19 @@ export function createClosedModal(propsData = {}, listeners = {}, mountingOption
       },
       ...mountingOptions
     })
-    resolve({ wrapper, localVue, $vfm: localVue.prototype.$vfm })
+    resolve({ wrapper, localVue, $modal: localVue.prototype.$modal })
   })
 }
 
 export function initDynamicModal() {
   return new Promise(resolve => {
     const localVue = createLocalVue()
-    localVue.use(VueFinalModal())
+    localVue.use(vfmPlugin)
     const wrapper = mount(
       {
         template: `
             <div>
-              <modals-container></modals-container>
+              <v-dynamic-modals></v-dynamic-modals>
             </div>
           `
       },
@@ -87,6 +87,6 @@ export function initDynamicModal() {
         localVue
       }
     )
-    resolve({ wrapper, localVue, $vfm: localVue.prototype.$vfm })
+    resolve({ wrapper, localVue, $modal: localVue.prototype.$modal })
   })
 }
diff --git a/types/index.d.ts b/types/index.d.ts
index 5441b18e..b54170f5 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -1,7 +1,7 @@
 import Vue, { PluginObject, VNodeData, Component, AsyncComponent } from 'vue'
 import './lib'
 
-export class VueFinalModalComponant extends Vue {
+export class VModalComponent extends Vue {
   $refs: {
     vfmContainer: HTMLDivElement
   }
@@ -63,11 +63,11 @@ interface DynamicModalData extends DynamicModalOptions {
   params: any
 }
 
-export interface VueFinalModalProperty {
+export interface $ModalProperty {
   readonly dynamicModals: DynamicModalData[]
-  readonly openedModals: VueFinalModalComponant[]
-  readonly modals: VueFinalModalComponant[]
-  get(...names: string[]): VueFinalModalComponant[]
+  readonly openedModals: VModalComponent[]
+  readonly modals: VModalComponent[]
+  get(...names: string[]): VModalComponent[]
 
   show(name: string, params?: any): void
   show(modal: DynamicModalOptions, params?: any): void
@@ -81,14 +81,14 @@ export interface VueFinalModalProperty {
 
 declare module 'vue/types/vue' {
   interface Vue {
-    readonly $vfm: VueFinalModalProperty
+    readonly $modal: $ModalProperty
   }
 }
 
 export interface VfmOptions {
-  dynamicContainerName?: string
-  componentName?: string
   key?: string
+  name?: string
+  containerName?: string
 }
 
 declare const VfmPlugin: () => PluginObject<VfmOptions>
diff --git a/types/lib.d.ts b/types/lib.d.ts
index 1d417e5b..f254192c 100644
--- a/types/lib.d.ts
+++ b/types/lib.d.ts
@@ -1,6 +1,3 @@
 declare module 'vue-final-modal/lib' {
-  import VfmPlugin from 'vue-final-modal'
-
-  export default VfmPlugin
   export * from 'vue-final-modal'
 }
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 0473cb06..bba5795a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1109,6 +1109,31 @@
     "@babel/helper-module-imports" "^7.10.4"
     "@rollup/pluginutils" "^3.1.0"
 
+"@rollup/plugin-commonjs@^19.0.0":
+  version "19.0.0"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-commonjs/-/plugin-commonjs-19.0.0.tgz#8c3e71f9a66908e60d70cc1be205834ef3e45f71"
+  integrity sha512-adTpD6ATGbehdaQoZQ6ipDFhdjqsTgpOAhFiPwl+dzre4pPshsecptDPyEFb61JMJ1+mGljktaC4jI8ARMSNyw==
+  dependencies:
+    "@rollup/pluginutils" "^3.1.0"
+    commondir "^1.0.1"
+    estree-walker "^2.0.1"
+    glob "^7.1.6"
+    is-reference "^1.2.1"
+    magic-string "^0.25.7"
+    resolve "^1.17.0"
+
+"@rollup/plugin-node-resolve@^13.0.0":
+  version "13.0.0"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-node-resolve/-/plugin-node-resolve-13.0.0.tgz#352f07e430ff377809ec8ec8a6fd636547162dc4"
+  integrity sha512-41X411HJ3oikIDivT5OKe9EZ6ud6DXudtfNrGbC4nniaxx2esiWjkLOzgnZsWq1IM8YIeL2rzRGLZLBjlhnZtQ==
+  dependencies:
+    "@rollup/pluginutils" "^3.1.0"
+    "@types/resolve" "1.17.1"
+    builtin-modules "^3.1.0"
+    deepmerge "^4.2.2"
+    is-module "^1.0.0"
+    resolve "^1.19.0"
+
 "@rollup/pluginutils@^3.1.0":
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-3.1.0.tgz#706b4524ee6dc8b103b3c995533e5ad680c02b9b"
@@ -1203,10 +1228,10 @@
   resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
   integrity sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==
 
-"@types/resolve@0.0.8":
-  version "0.0.8"
-  resolved "https://registry.yarnpkg.com/@types/resolve/-/resolve-0.0.8.tgz#f26074d238e02659e323ce1a13d041eee280e194"
-  integrity sha512-auApPaJf3NPfe18hSoJkp8EbZzer2ISk7o8mCC3M9he/a04+gbMF97NkpD2S8riMGvm4BMRI59/SZQSaLTKpsQ==
+"@types/resolve@1.17.1":
+  version "1.17.1"
+  resolved "https://registry.yarnpkg.com/@types/resolve/-/resolve-1.17.1.tgz#3afd6ad8967c77e4376c598a82ddd58f46ec45d6"
+  integrity sha512-yy7HuzQhj0dhGpD8RLXSZWEkLsV9ibvxvi6EiJ3bkqLAO1RGo0WbkWQiwpRlSFymTJRz0d3k5LM3kkx8ArDbLw==
   dependencies:
     "@types/node" "*"
 
@@ -2092,6 +2117,11 @@ commander@^6.2.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-6.2.1.tgz#0792eb682dfbc325999bb2b84fddddba110ac73c"
   integrity sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==
 
+commondir@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
+  integrity sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=
+
 component-emitter@^1.2.1:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.3.0.tgz#16e4070fba8ae29b679f2215853ee181ab2eabc0"
@@ -2336,6 +2366,11 @@ deep-is@^0.1.3, deep-is@~0.1.3:
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
   integrity sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=
 
+deepmerge@^4.2.2:
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955"
+  integrity sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==
+
 define-properties@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.1.3.tgz#cf88da6cbee26fe6db7094f61d870cbd84cee9f1"
@@ -2687,6 +2722,11 @@ estree-walker@^1.0.1:
   resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-1.0.1.tgz#31bc5d612c96b704106b477e6dd5d8aa138cb700"
   integrity sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg==
 
+estree-walker@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-2.0.2.tgz#52f010178c2a4c117a7757cfe942adb7d2da4cac"
+  integrity sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==
+
 esutils@^2.0.2:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
@@ -3378,7 +3418,7 @@ is-ci@^2.0.0:
   dependencies:
     ci-info "^2.0.0"
 
-is-core-module@^2.1.0, is-core-module@^2.2.0:
+is-core-module@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.2.0.tgz#97037ef3d52224d85163f5597b2b63d9afed981a"
   integrity sha512-XRAfAdyyY5F5cOXn7hYQDqh2Xmii+DEfIcQGxK/uNwMHhIkPWO0g8msXcbzLe+MpGoR951MlqM/2iIlU4vKDdQ==
@@ -3513,7 +3553,7 @@ is-promise@^2.0.0:
   resolved "https://registry.yarnpkg.com/is-promise/-/is-promise-2.2.2.tgz#39ab959ccbf9a774cf079f7b40c7a26f763135f1"
   integrity sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ==
 
-is-reference@^1.1.2:
+is-reference@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/is-reference/-/is-reference-1.2.1.tgz#8b2dac0b371f4bc994fdeaba9eb542d03002d0b7"
   integrity sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==
@@ -4410,7 +4450,7 @@ lru-cache@^6.0.0:
   dependencies:
     yallist "^4.0.0"
 
-magic-string@^0.25.2, magic-string@^0.25.7:
+magic-string@^0.25.7:
   version "0.25.7"
   resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.7.tgz#3f497d6fd34c669c6798dcb821f2ef31f5445051"
   integrity sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA==
@@ -5445,7 +5485,7 @@ resolve@1.1.7:
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.1.7.tgz#203114d82ad2c5ed9e8e0411b3932875e889e97b"
   integrity sha1-IDEU2CrSxe2ejgQRs5ModeiJ6Xs=
 
-resolve@^1.1.6, resolve@^1.10.0, resolve@^1.12.0, resolve@^1.14.2:
+resolve@^1.1.6, resolve@^1.10.0, resolve@^1.12.0, resolve@^1.14.2, resolve@^1.17.0, resolve@^1.19.0:
   version "1.20.0"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.20.0.tgz#629a013fb3f70755d6f0b7935cc1c2c5378b1975"
   integrity sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==
@@ -5453,14 +5493,6 @@ resolve@^1.1.6, resolve@^1.10.0, resolve@^1.12.0, resolve@^1.14.2:
     is-core-module "^2.2.0"
     path-parse "^1.0.6"
 
-resolve@^1.11.0, resolve@^1.11.1:
-  version "1.19.0"
-  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.19.0.tgz#1af5bf630409734a067cae29318aac7fa29a267c"
-  integrity sha512-rArEXAgsBG4UgRGcynxWIWKFvh/XZCcS8UJdHhwy91zwAvCZIbcs+vAbflgBnNjYMs/i/i+/Ux6IZhML1yPvxg==
-  dependencies:
-    is-core-module "^2.1.0"
-    path-parse "^1.0.6"
-
 restore-cursor@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-3.1.0.tgz#39f67c54b3a7a58cea5236d95cf0034239631f7e"
@@ -5503,28 +5535,6 @@ rollup-plugin-cleanup@^3.2.1:
     js-cleanup "^1.2.0"
     rollup-pluginutils "^2.8.2"
 
-rollup-plugin-commonjs@^10.1.0:
-  version "10.1.0"
-  resolved "https://registry.yarnpkg.com/rollup-plugin-commonjs/-/rollup-plugin-commonjs-10.1.0.tgz#417af3b54503878e084d127adf4d1caf8beb86fb"
-  integrity sha512-jlXbjZSQg8EIeAAvepNwhJj++qJWNJw1Cl0YnOqKtP5Djx+fFGkp3WRh+W0ASCaFG5w1jhmzDxgu3SJuVxPF4Q==
-  dependencies:
-    estree-walker "^0.6.1"
-    is-reference "^1.1.2"
-    magic-string "^0.25.2"
-    resolve "^1.11.0"
-    rollup-pluginutils "^2.8.1"
-
-rollup-plugin-node-resolve@^5.2.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/rollup-plugin-node-resolve/-/rollup-plugin-node-resolve-5.2.0.tgz#730f93d10ed202473b1fb54a5997a7db8c6d8523"
-  integrity sha512-jUlyaDXts7TW2CqQ4GaO5VJ4PwwaV8VUGA7+km3n6k6xtOEacf61u0VXwN80phY/evMcaS+9eIeJ9MOyDxt5Zw==
-  dependencies:
-    "@types/resolve" "0.0.8"
-    builtin-modules "^3.1.0"
-    is-module "^1.0.0"
-    resolve "^1.11.1"
-    rollup-pluginutils "^2.8.1"
-
 rollup-plugin-terser@^7.0.2:
   version "7.0.2"
   resolved "https://registry.yarnpkg.com/rollup-plugin-terser/-/rollup-plugin-terser-7.0.2.tgz#e8fbba4869981b2dc35ae7e8a502d5c6c04d324d"
@@ -5550,17 +5560,17 @@ rollup-plugin-vue@^5.1.9:
     source-map "0.7.3"
     vue-runtime-helpers "^1.1.2"
 
-rollup-pluginutils@^2.8.1, rollup-pluginutils@^2.8.2:
+rollup-pluginutils@^2.8.2:
   version "2.8.2"
   resolved "https://registry.yarnpkg.com/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz#72f2af0748b592364dbd3389e600e5a9444a351e"
   integrity sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ==
   dependencies:
     estree-walker "^0.6.1"
 
-rollup@^2.44.0:
-  version "2.44.0"
-  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.44.0.tgz#8da324d1c4fd12beef9ae6e12f4068265b6d95eb"
-  integrity sha512-rGSF4pLwvuaH/x4nAS+zP6UNn5YUDWf/TeEU5IoXSZKBbKRNTCI3qMnYXKZgrC0D2KzS2baiOZt1OlqhMu5rnQ==
+rollup@^2.51.0:
+  version "2.51.0"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.51.0.tgz#ffd847882283998fc8611cd57af917f173b4ab5c"
+  integrity sha512-ITLt9sScNCBVspSHauw/W49lEZ0vjN8LyCzSNsNaqT67vTss2lYEfOyxltX8hjrhr1l/rQwmZ2wazzEqhZ/fUg==
   optionalDependencies:
     fsevents "~2.3.1"