Skip to content

Commit

Permalink
fix force closing
Browse files Browse the repository at this point in the history
  • Loading branch information
kolirt committed Jul 11, 2023
1 parent 6f9b6e8 commit 5bdf4e0
Show file tree
Hide file tree
Showing 6 changed files with 7 additions and 7 deletions.

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion demo/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@

<script async src="https://www.googletagmanager.com/gtag/js?id=G-38YS8MVCYR"></script>
<script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-38YS8MVCYR');</script>
<script type="module" crossorigin src="/vue-modal/assets/index-8a9966b5.js"></script>
<script type="module" crossorigin src="/vue-modal/assets/index-d2029235.js"></script>
<link rel="stylesheet" href="/vue-modal/assets/index-1f9fdec1.css">
</head>
<body>
Expand Down
2 changes: 1 addition & 1 deletion dist/vue-modal.js
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ function Y(e) {
return "key" in e ? e.key === "Escape" || e.key === "Esc" : e.keyCode === 27;
}
async function ve(e, o, t) {
t != null && t.force && await Z(!1);
t != null && t.force && i.modals.length && await Z(!1);
const l = i.modals.length;
return Q(
e,
Expand Down
2 changes: 1 addition & 1 deletion dist/vue-modal.umd.cjs
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
(function(){var e;"use strict";try{if(typeof document<"u"){var a=document.createElement("style");a.nonce=(e=document.head.querySelector("meta[property=csp-nonce]"))==null?void 0:e.content,a.appendChild(document.createTextNode(`.vue-modal[data-v-1421616b]{position:fixed;top:0;left:0;width:100%;height:100%;overflow-y:auto;opacity:0;visibility:hidden;display:flex;justify-content:center;flex-wrap:wrap}.vue-modal.vue-modal--slideDown[data-v-1421616b]{transform:translateY(-40px)}.vue-modal.vue-modal--slideUp[data-v-1421616b]{transform:translateY(40px)}.vue-modal.vue-modal--slideLeft[data-v-1421616b]{transform:translate(-40px)}.vue-modal.vue-modal--slideRight[data-v-1421616b]{transform:translate(40px)}.vue-modal.vue-modal--center[data-v-1421616b]{align-items:center}.vue-modal.vue-modal--top[data-v-1421616b]{align-items:flex-start}.vue-modal.vue-modal--active[data-v-1421616b]:not(.vue-modal--hide){transform:translate(0);opacity:1;visibility:visible}.vue-modals[data-v-48abfbb2]{width:0}.vue-modals[data-v-48abfbb2] *{box-sizing:border-box}.vue-modals-overlay[data-v-48abfbb2]{position:fixed;top:0;left:0;width:100%;height:100%;opacity:0;visibility:hidden}.vue-modals-overlay.active[data-v-48abfbb2]{opacity:1;visibility:visible}.vue-modal-content[data-v-39a87773]{background:#fff;border-radius:.5rem;font-family:inherit}.vue-modal-content.size-sm[data-v-39a87773]{width:100%;max-width:576px}.vue-modal-content.size-md[data-v-39a87773]{width:100%;max-width:768px}.vue-modal-content.size-lg[data-v-39a87773]{width:100%;max-width:992px}.vue-modal-content.size-xl[data-v-39a87773]{width:100%;max-width:1200px}.vue-modal-content.size-xxl[data-v-39a87773]{width:100%;max-width:1400px}.vue-modal-header[data-v-39a87773]{padding:1rem;display:flex;flex-shrink:0;align-items:center;justify-content:space-between;border-bottom:1px solid #dee2e6;border-top-left-radius:.5rem;border-top-right-radius:.5rem}.vue-modal-title[data-v-39a87773]{font-size:1.25rem;font-weight:500;margin:0}.vue-modal-btn-close[data-v-39a87773]{opacity:.5;width:2rem;height:2rem;background:transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;border:none;padding:0;cursor:pointer;transition:opacity .2s ease}.vue-modal-btn-close[data-v-39a87773]:hover{opacity:1}.vue-modal-body[data-v-39a87773]{padding:1rem}.vue-modal-footer[data-v-39a87773]{padding:1rem;display:flex;flex-wrap:wrap;justify-content:flex-end;border-bottom-left-radius:.5rem;border-bottom-right-radius:.5rem;border-top:1px solid #dee2e6;gap:.25rem}`)),document.head.appendChild(a)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
(function(s,o){typeof exports=="object"&&typeof module<"u"?o(exports,require("vue"),require("js-event-bus")):typeof define=="function"&&define.amd?define(["exports","vue","js-event-bus"],o):(s=typeof globalThis<"u"?globalThis:s||self,o(s["vue-modal"]={},s.vue,s.jsEventBus))})(this,function(s,o,x){"use strict";const c=o.reactive({transitionTime:200,animationType:"slideDown",modalStyle:{padding:void 0,align:"center","z-index":201},overlayStyle:{"background-color":"rgba(0, 0, 0, 0.9)","z-index":200}});function E(e){var t,l,n,d,u;e!=null&&e.transitionTime&&(c.transitionTime=e.transitionTime),e!=null&&e.animationType&&(c.animationType=e.animationType),e!=null&&e.modalStyle&&((t=e.modalStyle)!=null&&t.padding&&(c.modalStyle.padding=e.modalStyle.padding),(l=e.modalStyle)!=null&&l.align&&(c.modalStyle.align=e.modalStyle.align),(n=e.modalStyle)!=null&&n["z-index"]&&(c.modalStyle["z-index"]=e.modalStyle["z-index"])),(d=e==null?void 0:e.overlayStyle)!=null&&d["z-index"]&&(c.overlayStyle["z-index"]=e.overlayStyle["z-index"]),(u=e==null?void 0:e.overlayStyle)!=null&&u["background-color"]&&(c.overlayStyle["background-color"]=e.overlayStyle["background-color"])}const r=o.reactive({modals:[]}),z=o.computed(()=>r.modals.length>0);function $(e,t,l){r.modals.push(o.markRaw({component:e,props:t,options:l}))}function L(){r.modals.pop()}const k=new x;function _(e,...t){k.emit(e,null,...t)}function m(e,t){k.on(e,t)}function f(e,t){k.detach(e,t)}var a=(e=>(e.Open="open",e.Opened="opened",e.Close="close",e.Closed="closed",e))(a||{});function N(e){return"key"in e?e.key==="Escape"||e.key==="Esc":e.keyCode===27}async function P(e,t,l){l!=null&&l.force&&await b(!1);const n=r.modals.length;return $(e,t),_(a.Open),new Promise((d,u)=>{function p(y){y.index===n&&(f(a.Closed,p),y.success?d(y.data):u())}m(a.Closed,p)})}function V(e){return new Promise(t=>{function l(n){f(a.Closed,l),t(n.data)}m(a.Closed,l),_(a.Close,{success:!0,data:e})})}function h(){return new Promise(e=>{function t(){f(a.Closed,t),e()}m(a.Closed,t),_(a.Close,{success:!1})})}function b(e=!0){return new Promise(t=>{function l(){f(a.Closed,l);for(let n=r.modals.length-1;n>=0;n--)r.modals.splice(n,1),_(a.Closed,{index:n,success:!1});t()}m(a.Closed,l),_(a.Close,{success:!1,forceCloseAll:e})})}const j=o.defineComponent({__name:"BaseModal",props:{index:{type:Number,required:!0}},setup(e){const t=e,l=o.ref(!1),n=o.computed(()=>t.index!==r.modals.length-1),d=o.computed(()=>c.animationType!=="none"&&c.transitionTime||0),u=o.computed(()=>{var i,C;return{padding:(i=c.modalStyle)==null?void 0:i.padding,"z-index":(C=c.modalStyle)==null?void 0:C["z-index"],transition:`opacity ${d.value}ms ease, visibility ${d.value}ms ease, transform ${d.value}ms ease`}}),p=o.computed(()=>{var i;return[{"vue-modal--active":l.value,"vue-modal--hide":n.value},`vue-modal--${(i=c.modalStyle)==null?void 0:i.align}`,`vue-modal--${c.animationType}`]});function y(i){r.modals.length-1===t.index&&(l.value=!1,setTimeout(_,d.value,a.Closed,{index:t.index,success:i.success,data:i.data}))}function g(i){N(i)&&r.modals.length-1===t.index&&h()}return o.onMounted(()=>{setTimeout(()=>{l.value=!0},t.index>0?d.value:0),m(a.Close,y),document.addEventListener("keydown",g),_(a.Opened)}),o.onBeforeUnmount(()=>{f(a.Close,y),document.removeEventListener("keydown",g)}),(i,C)=>(o.openBlock(),o.createElementBlock("div",{class:o.normalizeClass(["vue-modal",p.value]),style:o.normalizeStyle(u.value)},[o.renderSlot(i.$slots,"default",{},void 0,!0)],6))}}),K="",S=(e,t)=>{const l=e.__vccOpts||e;for(const[n,d]of t)l[n]=d;return l},R=S(j,[["__scopeId","data-v-1421616b"]]);function W(){var n;const e=document.createElement("div");e.style.visibility="hidden",e.style.overflow="scroll",document.body.appendChild(e);const t=document.createElement("div");e.appendChild(t);const l=e.offsetWidth-t.offsetWidth;return(n=e.parentNode)==null||n.removeChild(e),l}function v(){const e=o.ref(W());function t(){document.documentElement.style.overflow="hidden",document.documentElement.scrollHeight>document.documentElement.clientHeight&&(document.body.style.paddingRight=`${e.value}px`)}function l(){document.documentElement.style.overflow="auto",document.body.style.paddingRight="0px"}function n(d){d?t():l()}return{paddingSize:e,toggleLock:n}}const q={class:"vue-modals"},D=o.defineComponent({__name:"ModalTarget",setup(e){const t=c.animationType!=="none"&&c.transitionTime||0,l=o.computed(()=>({...c==null?void 0:c.overlayStyle,transition:`opacity ${t}ms ease, visibility ${t}ms ease`})),n=o.ref(!1),d=o.computed(()=>r.modals.length&&!n.value);function u({forceCloseAll:i}){(r.modals.length===1&&i!==!1||i)&&(n.value=!0,setTimeout(()=>{n.value=!1},t))}const p=v();function y(){p.toggleLock(!1)}function g(){p.toggleLock(!0)}return o.onMounted(()=>{m(a.Close,u),m(a.Closed,y),m(a.Open,g)}),o.onBeforeUnmount(()=>{f(a.Close,u),f(a.Closed,y),f(a.Open,g)}),(i,C)=>(o.openBlock(),o.createElementBlock("div",q,[(o.openBlock(!0),o.createElementBlock(o.Fragment,null,o.renderList(o.unref(r).modals,(M,T)=>(o.openBlock(),o.createBlock(R,{index:T,key:T},{default:o.withCtx(()=>[(o.openBlock(),o.createBlock(o.resolveDynamicComponent(M.component),o.normalizeProps(o.guardReactiveProps(M.props)),null,16))]),_:2},1032,["index"]))),128)),o.createElementVNode("div",{class:o.normalizeClass(["vue-modals-overlay",{active:d.value}]),style:o.normalizeStyle(l.value)},null,6)]))}}),Q="",B=S(D,[["__scopeId","data-v-48abfbb2"]]),I={key:0,class:"vue-modal-header"},H={key:0,class:"vue-modal-title"},U={class:"vue-modal-body"},A={key:1,class:"vue-modal-footer"},F=o.defineComponent({__name:"SimpleModal",props:{title:{},showClose:{type:Boolean,default:!0},size:{type:String,default:"sm",validator(e){return["sm","md","lg","xl","xxl"].includes(e)}}},setup(e){const t=e,l=o.useSlots();return(n,d)=>(o.openBlock(),o.createElementBlock("div",{class:o.normalizeClass(["vue-modal-content",`size-${t.size}`])},[t.title||t.showClose?(o.openBlock(),o.createElementBlock("div",I,[t.title?(o.openBlock(),o.createElementBlock("h1",H,o.toDisplayString(t.title),1)):o.createCommentVNode("",!0),t.showClose?(o.openBlock(),o.createElementBlock("button",{key:1,onClick:d[0]||(d[0]=u=>o.unref(h)()),class:"vue-modal-btn-close","aria-label":"Close"})):o.createCommentVNode("",!0)])):o.createCommentVNode("",!0),o.createElementVNode("div",U,[o.renderSlot(n.$slots,"default",{},void 0,!0)]),o.unref(l).footer?(o.openBlock(),o.createElementBlock("div",A,[o.renderSlot(n.$slots,"footer",{},void 0,!0)])):o.createCommentVNode("",!0)],2))}}),X="",G=S(F,[["__scopeId","data-v-39a87773"]]);function J(e){return{install(t){E(e||{}),t.component("ModalTarget",B),t.component("SimpleModal",G),m(a.Closed,L)}}}s.$off=f,s.$on=m,s.Events=a,s.ModalTarget=B,s.closeAllModals=b,s.closeModal=h,s.confirmModal=V,s.createModal=J,s.isOpened=z,s.openModal=P,s.useLock=v,Object.defineProperty(s,Symbol.toStringTag,{value:"Module"})});
(function(s,o){typeof exports=="object"&&typeof module<"u"?o(exports,require("vue"),require("js-event-bus")):typeof define=="function"&&define.amd?define(["exports","vue","js-event-bus"],o):(s=typeof globalThis<"u"?globalThis:s||self,o(s["vue-modal"]={},s.vue,s.jsEventBus))})(this,function(s,o,x){"use strict";const c=o.reactive({transitionTime:200,animationType:"slideDown",modalStyle:{padding:void 0,align:"center","z-index":201},overlayStyle:{"background-color":"rgba(0, 0, 0, 0.9)","z-index":200}});function E(e){var t,l,n,d,u;e!=null&&e.transitionTime&&(c.transitionTime=e.transitionTime),e!=null&&e.animationType&&(c.animationType=e.animationType),e!=null&&e.modalStyle&&((t=e.modalStyle)!=null&&t.padding&&(c.modalStyle.padding=e.modalStyle.padding),(l=e.modalStyle)!=null&&l.align&&(c.modalStyle.align=e.modalStyle.align),(n=e.modalStyle)!=null&&n["z-index"]&&(c.modalStyle["z-index"]=e.modalStyle["z-index"])),(d=e==null?void 0:e.overlayStyle)!=null&&d["z-index"]&&(c.overlayStyle["z-index"]=e.overlayStyle["z-index"]),(u=e==null?void 0:e.overlayStyle)!=null&&u["background-color"]&&(c.overlayStyle["background-color"]=e.overlayStyle["background-color"])}const r=o.reactive({modals:[]}),z=o.computed(()=>r.modals.length>0);function $(e,t,l){r.modals.push(o.markRaw({component:e,props:t,options:l}))}function L(){r.modals.pop()}const k=new x;function _(e,...t){k.emit(e,null,...t)}function m(e,t){k.on(e,t)}function f(e,t){k.detach(e,t)}var a=(e=>(e.Open="open",e.Opened="opened",e.Close="close",e.Closed="closed",e))(a||{});function N(e){return"key"in e?e.key==="Escape"||e.key==="Esc":e.keyCode===27}async function P(e,t,l){l!=null&&l.force&&r.modals.length&&await b(!1);const n=r.modals.length;return $(e,t),_(a.Open),new Promise((d,u)=>{function p(y){y.index===n&&(f(a.Closed,p),y.success?d(y.data):u())}m(a.Closed,p)})}function V(e){return new Promise(t=>{function l(n){f(a.Closed,l),t(n.data)}m(a.Closed,l),_(a.Close,{success:!0,data:e})})}function h(){return new Promise(e=>{function t(){f(a.Closed,t),e()}m(a.Closed,t),_(a.Close,{success:!1})})}function b(e=!0){return new Promise(t=>{function l(){f(a.Closed,l);for(let n=r.modals.length-1;n>=0;n--)r.modals.splice(n,1),_(a.Closed,{index:n,success:!1});t()}m(a.Closed,l),_(a.Close,{success:!1,forceCloseAll:e})})}const j=o.defineComponent({__name:"BaseModal",props:{index:{type:Number,required:!0}},setup(e){const t=e,l=o.ref(!1),n=o.computed(()=>t.index!==r.modals.length-1),d=o.computed(()=>c.animationType!=="none"&&c.transitionTime||0),u=o.computed(()=>{var i,C;return{padding:(i=c.modalStyle)==null?void 0:i.padding,"z-index":(C=c.modalStyle)==null?void 0:C["z-index"],transition:`opacity ${d.value}ms ease, visibility ${d.value}ms ease, transform ${d.value}ms ease`}}),p=o.computed(()=>{var i;return[{"vue-modal--active":l.value,"vue-modal--hide":n.value},`vue-modal--${(i=c.modalStyle)==null?void 0:i.align}`,`vue-modal--${c.animationType}`]});function y(i){r.modals.length-1===t.index&&(l.value=!1,setTimeout(_,d.value,a.Closed,{index:t.index,success:i.success,data:i.data}))}function g(i){N(i)&&r.modals.length-1===t.index&&h()}return o.onMounted(()=>{setTimeout(()=>{l.value=!0},t.index>0?d.value:0),m(a.Close,y),document.addEventListener("keydown",g),_(a.Opened)}),o.onBeforeUnmount(()=>{f(a.Close,y),document.removeEventListener("keydown",g)}),(i,C)=>(o.openBlock(),o.createElementBlock("div",{class:o.normalizeClass(["vue-modal",p.value]),style:o.normalizeStyle(u.value)},[o.renderSlot(i.$slots,"default",{},void 0,!0)],6))}}),K="",S=(e,t)=>{const l=e.__vccOpts||e;for(const[n,d]of t)l[n]=d;return l},R=S(j,[["__scopeId","data-v-1421616b"]]);function W(){var n;const e=document.createElement("div");e.style.visibility="hidden",e.style.overflow="scroll",document.body.appendChild(e);const t=document.createElement("div");e.appendChild(t);const l=e.offsetWidth-t.offsetWidth;return(n=e.parentNode)==null||n.removeChild(e),l}function v(){const e=o.ref(W());function t(){document.documentElement.style.overflow="hidden",document.documentElement.scrollHeight>document.documentElement.clientHeight&&(document.body.style.paddingRight=`${e.value}px`)}function l(){document.documentElement.style.overflow="auto",document.body.style.paddingRight="0px"}function n(d){d?t():l()}return{paddingSize:e,toggleLock:n}}const q={class:"vue-modals"},D=o.defineComponent({__name:"ModalTarget",setup(e){const t=c.animationType!=="none"&&c.transitionTime||0,l=o.computed(()=>({...c==null?void 0:c.overlayStyle,transition:`opacity ${t}ms ease, visibility ${t}ms ease`})),n=o.ref(!1),d=o.computed(()=>r.modals.length&&!n.value);function u({forceCloseAll:i}){(r.modals.length===1&&i!==!1||i)&&(n.value=!0,setTimeout(()=>{n.value=!1},t))}const p=v();function y(){p.toggleLock(!1)}function g(){p.toggleLock(!0)}return o.onMounted(()=>{m(a.Close,u),m(a.Closed,y),m(a.Open,g)}),o.onBeforeUnmount(()=>{f(a.Close,u),f(a.Closed,y),f(a.Open,g)}),(i,C)=>(o.openBlock(),o.createElementBlock("div",q,[(o.openBlock(!0),o.createElementBlock(o.Fragment,null,o.renderList(o.unref(r).modals,(M,T)=>(o.openBlock(),o.createBlock(R,{index:T,key:T},{default:o.withCtx(()=>[(o.openBlock(),o.createBlock(o.resolveDynamicComponent(M.component),o.normalizeProps(o.guardReactiveProps(M.props)),null,16))]),_:2},1032,["index"]))),128)),o.createElementVNode("div",{class:o.normalizeClass(["vue-modals-overlay",{active:d.value}]),style:o.normalizeStyle(l.value)},null,6)]))}}),Q="",B=S(D,[["__scopeId","data-v-48abfbb2"]]),I={key:0,class:"vue-modal-header"},H={key:0,class:"vue-modal-title"},U={class:"vue-modal-body"},A={key:1,class:"vue-modal-footer"},F=o.defineComponent({__name:"SimpleModal",props:{title:{},showClose:{type:Boolean,default:!0},size:{type:String,default:"sm",validator(e){return["sm","md","lg","xl","xxl"].includes(e)}}},setup(e){const t=e,l=o.useSlots();return(n,d)=>(o.openBlock(),o.createElementBlock("div",{class:o.normalizeClass(["vue-modal-content",`size-${t.size}`])},[t.title||t.showClose?(o.openBlock(),o.createElementBlock("div",I,[t.title?(o.openBlock(),o.createElementBlock("h1",H,o.toDisplayString(t.title),1)):o.createCommentVNode("",!0),t.showClose?(o.openBlock(),o.createElementBlock("button",{key:1,onClick:d[0]||(d[0]=u=>o.unref(h)()),class:"vue-modal-btn-close","aria-label":"Close"})):o.createCommentVNode("",!0)])):o.createCommentVNode("",!0),o.createElementVNode("div",U,[o.renderSlot(n.$slots,"default",{},void 0,!0)]),o.unref(l).footer?(o.openBlock(),o.createElementBlock("div",A,[o.renderSlot(n.$slots,"footer",{},void 0,!0)])):o.createCommentVNode("",!0)],2))}}),X="",G=S(F,[["__scopeId","data-v-39a87773"]]);function J(e){return{install(t){E(e||{}),t.component("ModalTarget",B),t.component("SimpleModal",G),m(a.Closed,L)}}}s.$off=f,s.$on=m,s.Events=a,s.ModalTarget=B,s.closeAllModals=b,s.closeModal=h,s.confirmModal=V,s.createModal=J,s.isOpened=z,s.openModal=P,s.useLock=v,Object.defineProperty(s,Symbol.toStringTag,{value:"Module"})});
2 changes: 1 addition & 1 deletion lib/actions.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import {$emit, $off, $on} from './event'

/*, options?: Options*/
export async function openModal(component: Component, props?: {}, options?: OpenModalOptions) {
if (options?.force) {
if (options?.force && stateData.modals.length) {
await closeAllModals(false)
}

Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@kolirt/vue-modal",
"version": "0.0.8",
"version": "0.0.9",
"description": "Simple Vue3 modal package",
"author": "kolirt",
"license": "MIT",
Expand Down

0 comments on commit 5bdf4e0

Please sign in to comment.