Easy to use and highly customizable Vue3 modal package
',3),ua=Be({__name:"App",setup(e){function t(){Bt(ia,{test:"modal1"},{modalStyle:{align:"top"}}).then(o=>{Ce({type:"success",title:"Success modal1",text:JSON.stringify(o)})}).catch(()=>{Ce({type:"error",title:"Error modal1"})})}function n(){Bt(Or,{test:"modal2"}).then(o=>{Ce({type:"success",title:"Success modal2",text:JSON.stringify(o)})}).catch(()=>{Ce({type:"error",title:"Error modal2"})})}function s(){Bt(Mr,{test:"modal3"}).then(o=>{Ce({type:"success",title:"Success modal3",text:JSON.stringify(o)})}).catch(()=>{Ce({type:"error",title:"Error modal3"})})}return(o,r)=>{const i=wn("notifications");return J(),ve(ce,null,[k("div",{class:"container py-5"},[k("div",{class:"bg-body-secondary p-5 rounded"},[la,ca,aa,k("div",{class:"d-grid gap-2 d-sm-flex"},[k("button",{onClick:t,class:"btn btn-primary"}," Open modal1 "),k("button",{onClick:n,class:"btn btn-primary"}," Open modal2 "),k("button",{onClick:s,class:"btn btn-primary"}," Open modal3 ")])])]),he(i,{class:"notifications"}),he(_e(Ar))],64)}}});const fa=On(ua,[["__scopeId","data-v-64d9dd35"]]);const Ms=pc(fa);Ms.use(Rc);Ms.use(sa({transitionTime:200,animationType:"slideUp",modalStyle:{padding:"2rem 1rem"},overlayStyle:{"background-color":"rgba(0,0,0,.3)"}}));Ms.mount("#app"); diff --git a/demo/assets/index-b143dac6.js b/demo/assets/index-b143dac6.js new file mode 100644 index 0000000..c8f4f45 --- /dev/null +++ b/demo/assets/index-b143dac6.js @@ -0,0 +1,2 @@ +(function(){const t=document.createElement("link").relList;if(t&&t.supports&&t.supports("modulepreload"))return;for(const r of document.querySelectorAll('link[rel="modulepreload"]'))s(r);new MutationObserver(r=>{for(const o of r)if(o.type==="childList")for(const i of o.addedNodes)i.tagName==="LINK"&&i.rel==="modulepreload"&&s(i)}).observe(document,{childList:!0,subtree:!0});function n(r){const o={};return r.integrity&&(o.integrity=r.integrity),r.referrerPolicy&&(o.referrerPolicy=r.referrerPolicy),r.crossOrigin==="use-credentials"?o.credentials="include":r.crossOrigin==="anonymous"?o.credentials="omit":o.credentials="same-origin",o}function s(r){if(r.ep)return;r.ep=!0;const o=n(r);fetch(r.href,o)}})();function ss(e,t){const n=Object.create(null),s=e.split(",");for(let r=0;rEasy to use and highly customizable Vue3 modal package
',3),ha=ke({__name:"App",setup(e){function t(){cn(Yi(()=>Hc(()=>import("./Test1Modal-d7cae5c6.js"),[])),{test:"modal1"},{modalStyle:{align:"top"}}).then(r=>{Le({type:"success",title:"Success modal1",text:JSON.stringify(r)})}).catch(()=>{Le({type:"error",title:"Error modal1"})})}function n(){cn(ua,{test:"modal2"}).then(r=>{Le({type:"success",title:"Success modal2",text:JSON.stringify(r)})}).catch(()=>{Le({type:"error",title:"Error modal2"})})}function s(){cn(Io,{test:"modal3"}).then(r=>{Le({type:"success",title:"Success modal3",text:JSON.stringify(r)})}).catch(()=>{Le({type:"error",title:"Error modal3"})})}return(r,o)=>{const i=bs("notifications");return Q(),ve(ae,null,[z("div",{class:"container py-5"},[z("div",{class:"bg-body-secondary p-5 rounded"},[fa,da,pa,z("div",{class:"d-grid gap-2 d-sm-flex"},[z("button",{onClick:t,class:"btn btn-primary"}," Open modal1 "),z("button",{onClick:n,class:"btn btn-primary"}," Open modal2 "),z("button",{onClick:s,class:"btn btn-primary"}," Open modal3 ")])])]),le(i,{class:"notifications"}),le(Ae(Oo))],64)}}});const ma=On(ha,[["__scopeId","data-v-69cf6a48"]]);const Os=mc(ma);Os.use(Dc);Os.use(ca({transitionTime:200,animationType:"slideUp",modalStyle:{padding:"2rem 1rem"},overlayStyle:{"background-color":"rgba(0,0,0,.3)"}}));Os.mount("#app");export{Le as A,ua as _,z as a,Mn as b,qe as c,ke as d,Mo as e,cn as f,Q as o,bs as r,cs as t,Ae as u,We as w}; diff --git a/demo/assets/index-36f5fc1a.css b/demo/assets/index-b33a0378.css similarity index 99% rename from demo/assets/index-36f5fc1a.css rename to demo/assets/index-b33a0378.css index 5667f20..893b701 100644 --- a/demo/assets/index-36f5fc1a.css +++ b/demo/assets/index-b33a0378.css @@ -1,4 +1,4 @@ -@charset "UTF-8";.vue-modal[data-v-0195a498]{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-0195a498]{transform:translateY(-40px)}.vue-modal.vue-modal--slideUp[data-v-0195a498]{transform:translateY(40px)}.vue-modal.vue-modal--slideLeft[data-v-0195a498]{transform:translate(-40px)}.vue-modal.vue-modal--slideRight[data-v-0195a498]{transform:translate(40px)}.vue-modal.vue-modal--center[data-v-0195a498]{align-items:center}.vue-modal.vue-modal--top[data-v-0195a498]{align-items:flex-start}.vue-modal.vue-modal--active[data-v-0195a498]:not(.vue-modal--hide){transform:translate(0);opacity:1;visibility:visible}.vue-modals[data-v-90fab32e]{width:0}.vue-modals[data-v-90fab32e] *{box-sizing:border-box}.vue-modals-overlay[data-v-90fab32e]{position:fixed;top:0;left:0;width:100%;height:100%;opacity:0;visibility:hidden}.vue-modals-overlay.active[data-v-90fab32e]{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}.notifications[data-v-64d9dd35]{position:fixed;right:unset!important;left:100vw;transform:translate(-100%);margin-left:-15px}/*! +@charset "UTF-8";.vue-modal[data-v-0195a498]{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-0195a498]{transform:translateY(-40px)}.vue-modal.vue-modal--slideUp[data-v-0195a498]{transform:translateY(40px)}.vue-modal.vue-modal--slideLeft[data-v-0195a498]{transform:translate(-40px)}.vue-modal.vue-modal--slideRight[data-v-0195a498]{transform:translate(40px)}.vue-modal.vue-modal--center[data-v-0195a498]{align-items:center}.vue-modal.vue-modal--top[data-v-0195a498]{align-items:flex-start}.vue-modal.vue-modal--active[data-v-0195a498]:not(.vue-modal--hide){transform:translate(0);opacity:1;visibility:visible}.vue-modals[data-v-90fab32e]{width:0}.vue-modals[data-v-90fab32e] *{box-sizing:border-box}.vue-modals-overlay[data-v-90fab32e]{position:fixed;top:0;left:0;width:100%;height:100%;opacity:0;visibility:hidden}.vue-modals-overlay.active[data-v-90fab32e]{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}.notifications[data-v-69cf6a48]{position:fixed;right:unset!important;left:100vw;transform:translate(-100%);margin-left:-15px}/*! * Bootstrap v5.3.0 (https://getbootstrap.com/) * Copyright 2011-2023 The Bootstrap Authors * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) diff --git a/demo/index.html b/demo/index.html index 36d3133..8ad5e3c 100644 --- a/demo/index.html +++ b/demo/index.html @@ -8,8 +8,8 @@ - - + + diff --git a/lib/actions.ts b/lib/actions.ts index 422ee7d..0afb55e 100644 --- a/lib/actions.ts +++ b/lib/actions.ts @@ -1,5 +1,5 @@ import type {Component} from 'vue' -import type {/*Options,*/ CloseEventData, OpenModalOptions} from './types' +import type {CloseEventData, OpenModalOptions} from './types' import {Events} from './types' import {addModal, state as stateData} from './data' import {$emit, $off, $on} from './event' diff --git a/package.json b/package.json index 9c1273e..71a694f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@kolirt/vue-modal", - "version": "0.0.12", + "version": "0.0.13", "description": "Simple Vue3 modal package", "author": "kolirt", "license": "MIT", diff --git a/src/App.vue b/src/App.vue index 950eb11..27e64a6 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,12 +1,12 @@