vue-nt-toast 0.3.2 → 0.3.4

package/dist/nt-toast.es.js

@@ -76,7 +76,7 @@ class h {
     this.icon.innerHTML = t, this.toast.appendChild(this.icon);
   }
   setContents() {
-    const t = document.createElement("div"), s = document.createElement("h5");
+    const t = document.createElement("div"), s = document.createElement("div");
     s.classList.add("title", "ellipsis");
     const e = document.createElement("div");
     return typeof this.msg == "string" ? (e.innerHTML = this.msg, t.appendChild(e)) : (this.options.useTitle && (s.innerHTML = this.msg.title, t.appendChild(s)), e.innerHTML = this.msg.description, t.appendChild(e)), t;
@@ -131,14 +131,15 @@ const u = {
   useTitle: !0,
   useIcon: !0,
   closeButton: !0,
-  round: !1,
-  theme: "",
-  timeout: 5e3,
   clickToClose: !0,
-  displayOnTop: !1,
+  round: !1,
+  theme: "default",
+  position: "bottom-right",
+  displayOnTop: !0,
   snackbar: !1,
-  freeze: !0,
-  transition: "swing"
+  freeze: !1,
+  transition: "swing",
+  timeout: 5e3
 };
 let c = {};
 const p = (o) => ({ ...u, ...o }), k = {

package/dist/nt-toast.umd.js

@@ -45,4 +45,4 @@
     <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round" fill="currentColor"/>
     </svg>
-  `};class l{constructor(t,s,e){this.type=t,this.msg=s,this.options=e,this.interval=null,this.toast=null,this.icon=null,this.closeButton=null,this.notify()}notify(){this.toast=document.createElement("div"),this.toast.classList.add("toast","swing");const t=this.setContents();return this.setIcon(),this.options.round&&this.toast.classList.add("round"),this.options.theme==="light"?this.toast.classList.add(`${this.type}`,"light"):this.options.theme==="icon"?this.icon.classList.add(`${this.type}-text`):this.options.theme==="icon-bg"?this.icon.classList.add(`${this.type}`):this.options.theme==="line"?(this.toast.classList.add("line-left"),t.classList.add(`${this.type}-border`)):this.toast.classList.add(`${this.type}`),t.classList.add("toast-contents"),this.toast.appendChild(t),this.toast}setIcon(){if(!this.options.useIcon||this.options.theme==="line")return;this.icon=document.createElement("div"),this.icon.classList.add("toast-icon");const t=o[this.type]||o.info;this.icon.innerHTML=t,this.toast.appendChild(this.icon)}setContents(){const t=document.createElement("div"),s=document.createElement("h5");s.classList.add("title","ellipsis");const e=document.createElement("div");return typeof this.msg=="string"?(e.innerHTML=this.msg,t.appendChild(e)):(this.options.useTitle&&(s.innerHTML=this.msg.title,t.appendChild(s)),e.innerHTML=this.msg.description,t.appendChild(e)),t}}class h{constructor(t){this.toastId=0,this.options=t,this.board=null}show(t,s,e){const i={...this.options,...e};i.snackbar&&this.clear();let a=null;this.toastId++,this.board=this.getBoard(i);const r=new l(t,s,i).toast;i.closeButton&&(a=this.setClose(),r.appendChild(a)),this.board.appendChild(r);const d=i.freeze?null:setTimeout(()=>this.hideToast(r,d),i.timeout);i.clickToClose&&r.addEventListener("click",()=>{this.hideToast(r,d)}),i.closeButton&&a.addEventListener("click",()=>{this.hideToast(r,d)})}getBoard(t){let s=document.querySelector(".toast-board");return s||(s=document.createElement("div"),s.classList.add("toast-board"),s.classList.add(t.position),t.displayOnTop&&s.classList.add("on-top"),document.body.appendChild(s),s)}setClose(){const t=document.createElement("button");return t.classList.add("toast-close"),t.innerHTML="<span>&times;</span>",t}hideToast(t,s){this.toastId--,t.classList.remove("swing"),t.addEventListener("transitionend",()=>{this.removeToast(t),clearTimeout(s)})}removeToast(t){t.remove(),this.toastId||this.clear()}clearToast(){if(!this.board)return;this.board.querySelectorAll(".toast").forEach(s=>{this.hideToast(s,null)})}clear(){this.board&&this.board.parentNode&&(this.board.remove(),this.board=null),this.toastId=0}}const f="",u={useTitle:!0,useIcon:!0,closeButton:!0,round:!1,theme:"",timeout:5e3,clickToClose:!0,displayOnTop:!1,snackbar:!1,freeze:!0,transition:"swing"};let c={};const p=n=>({...u,...n});return{install(n,t={}){c=p(t),n.config.globalProperties.$ntToast=new h(c),n.provide("$ntToast",new h(c))}}});
+  `};class l{constructor(t,s,e){this.type=t,this.msg=s,this.options=e,this.interval=null,this.toast=null,this.icon=null,this.closeButton=null,this.notify()}notify(){this.toast=document.createElement("div"),this.toast.classList.add("toast","swing");const t=this.setContents();return this.setIcon(),this.options.round&&this.toast.classList.add("round"),this.options.theme==="light"?this.toast.classList.add(`${this.type}`,"light"):this.options.theme==="icon"?this.icon.classList.add(`${this.type}-text`):this.options.theme==="icon-bg"?this.icon.classList.add(`${this.type}`):this.options.theme==="line"?(this.toast.classList.add("line-left"),t.classList.add(`${this.type}-border`)):this.toast.classList.add(`${this.type}`),t.classList.add("toast-contents"),this.toast.appendChild(t),this.toast}setIcon(){if(!this.options.useIcon||this.options.theme==="line")return;this.icon=document.createElement("div"),this.icon.classList.add("toast-icon");const t=o[this.type]||o.info;this.icon.innerHTML=t,this.toast.appendChild(this.icon)}setContents(){const t=document.createElement("div"),s=document.createElement("div");s.classList.add("title","ellipsis");const e=document.createElement("div");return typeof this.msg=="string"?(e.innerHTML=this.msg,t.appendChild(e)):(this.options.useTitle&&(s.innerHTML=this.msg.title,t.appendChild(s)),e.innerHTML=this.msg.description,t.appendChild(e)),t}}class h{constructor(t){this.toastId=0,this.options=t,this.board=null}show(t,s,e){const i={...this.options,...e};i.snackbar&&this.clear();let a=null;this.toastId++,this.board=this.getBoard(i);const r=new l(t,s,i).toast;i.closeButton&&(a=this.setClose(),r.appendChild(a)),this.board.appendChild(r);const d=i.freeze?null:setTimeout(()=>this.hideToast(r,d),i.timeout);i.clickToClose&&r.addEventListener("click",()=>{this.hideToast(r,d)}),i.closeButton&&a.addEventListener("click",()=>{this.hideToast(r,d)})}getBoard(t){let s=document.querySelector(".toast-board");return s||(s=document.createElement("div"),s.classList.add("toast-board"),s.classList.add(t.position),t.displayOnTop&&s.classList.add("on-top"),document.body.appendChild(s),s)}setClose(){const t=document.createElement("button");return t.classList.add("toast-close"),t.innerHTML="<span>&times;</span>",t}hideToast(t,s){this.toastId--,t.classList.remove("swing"),t.addEventListener("transitionend",()=>{this.removeToast(t),clearTimeout(s)})}removeToast(t){t.remove(),this.toastId||this.clear()}clearToast(){if(!this.board)return;this.board.querySelectorAll(".toast").forEach(s=>{this.hideToast(s,null)})}clear(){this.board&&this.board.parentNode&&(this.board.remove(),this.board=null),this.toastId=0}}const f="",u={useTitle:!0,useIcon:!0,closeButton:!0,clickToClose:!0,round:!1,theme:"default",position:"bottom-right",displayOnTop:!0,snackbar:!1,freeze:!1,transition:"swing",timeout:5e3};let c={};const p=n=>({...u,...n});return{install(n,t={}){c=p(t),n.config.globalProperties.$ntToast=new h(c),n.provide("$ntToast",new h(c))}}});

package/dist/toast.css

@@ -1 +1 @@
-button{border:0 none;background-color:transparent;cursor:pointer}.toast.success,.toast .success{background-color:#528e64!important;color:#fff!important;border-color:#3f6e4d!important}.toast.success:hover,.toast .success:hover{background-color:#3f6e4d}.toast.success-text,.toast .success-text{color:#528e64!important}.toast.success-bg,.toast .success-bg{background-color:#528e64!important}.toast.success-border,.toast .success-border{border-color:#3f6e4d!important}.toast.success.light,.toast .success.light{background-color:#cbe1d2!important;color:#528e64!important;border-color:#3f6e4d!important}.toast.info,.toast .info{background-color:#62b0bc!important;color:#fff!important;border-color:#4698a5!important}.toast.info:hover,.toast .info:hover{background-color:#4698a5}.toast.info-text,.toast .info-text{color:#62b0bc!important}.toast.info-bg,.toast .info-bg{background-color:#62b0bc!important}.toast.info-border,.toast .info-border{border-color:#4698a5!important}.toast.info.light,.toast .info.light{background-color:#d4e9ed!important;color:#62b0bc!important;border-color:#4698a5!important}.toast.danger,.toast .danger{background-color:#d53012!important;color:#fff!important;border-color:#a6250e!important}.toast.danger:hover,.toast .danger:hover{background-color:#a6250e}.toast.danger-text,.toast .danger-text{color:#d53012!important}.toast.danger-bg,.toast .danger-bg{background-color:#d53012!important}.toast.danger-border,.toast .danger-border{border-color:#a6250e!important}.toast.danger.light,.toast .danger.light{background-color:#fbe0da!important;color:#d53012!important;border-color:#a6250e!important}.toast.attention,.toast .attention{background-color:#ec6e00!important;color:#fff!important;border-color:#b95600!important}.toast.attention:hover,.toast .attention:hover{background-color:#b95600}.toast.attention-text,.toast .attention-text{color:#ec6e00!important}.toast.attention-bg,.toast .attention-bg{background-color:#ec6e00!important}.toast.attention-border,.toast .attention-border{border-color:#b95600!important}.toast.attention.light,.toast .attention.light{background-color:#ffe9d6!important;color:#ec6e00!important;border-color:#b95600!important}.toast.importance,.toast .importance{background-color:#fdc036!important;color:#fff!important;border-color:#fcb004!important}.toast.importance:hover,.toast .importance:hover{background-color:#fcb004}.toast.importance-text,.toast .importance-text{color:#fdc036!important}.toast.importance-bg,.toast .importance-bg{background-color:#fdc036!important}.toast.importance-border,.toast .importance-border{border-color:#fcb004!important}.toast.importance.light,.toast .importance.light{background-color:#fff3d7!important;color:#fdc036!important;border-color:#fcb004!important}.toast.red,.toast .red{background-color:#d93b3b!important;color:#fff!important;border-color:#bc2525!important}.toast.red:hover,.toast .red:hover{background-color:#bc2525}.toast.red-text,.toast .red-text{color:#d93b3b!important}.toast.red-bg,.toast .red-bg{background-color:#d93b3b!important}.toast.red-border,.toast .red-border{border-color:#d93b3b!important}.toast.red.light,.toast .red.light{background-color:#f6d1d1!important;color:#d93b3b!important;border-color:#bc2525!important}.toast.sunset,.toast .sunset{background-color:#d44d32!important;color:#fff!important;border-color:#ae3c25!important}.toast.sunset:hover,.toast .sunset:hover{background-color:#ae3c25}.toast.sunset-text,.toast .sunset-text{color:#d44d32!important}.toast.sunset-bg,.toast .sunset-bg{background-color:#d44d32!important}.toast.sunset-border,.toast .sunset-border{border-color:#d44d32!important}.toast.sunset.light,.toast .sunset.light{background-color:#f3cdc6!important;color:#d44d32!important;border-color:#ae3c25!important}.toast.orange,.toast .orange{background-color:#d95b2c!important;color:#fff!important;border-color:#b24820!important}.toast.orange:hover,.toast .orange:hover{background-color:#b24820}.toast.orange-text,.toast .orange-text{color:#d95b2c!important}.toast.orange-bg,.toast .orange-bg{background-color:#d95b2c!important}.toast.orange-border,.toast .orange-border{border-color:#d95b2c!important}.toast.orange.light,.toast .orange.light{background-color:#f4d1c3!important;color:#d95b2c!important;border-color:#b24820!important}.toast.amber,.toast .amber{background-color:#d3873f!important;color:#fff!important;border-color:#b56e2a!important}.toast.amber:hover,.toast .amber:hover{background-color:#b56e2a}.toast.amber-text,.toast .amber-text{color:#d3873f!important}.toast.amber-bg,.toast .amber-bg{background-color:#d3873f!important}.toast.amber-border,.toast .amber-border{border-color:#d3873f!important}.toast.amber.light,.toast .amber.light{background-color:#f4e2d0!important;color:#d3873f!important;border-color:#b56e2a!important}.toast.yellow,.toast .yellow{background-color:#f5b54d!important;color:#fff!important;border-color:#f2a11d!important}.toast.yellow:hover,.toast .yellow:hover{background-color:#f2a11d}.toast.yellow-text,.toast .yellow-text{color:#f5b54d!important}.toast.yellow-bg,.toast .yellow-bg{background-color:#f5b54d!important}.toast.yellow-border,.toast .yellow-border{border-color:#f5b54d!important}.toast.yellow.light,.toast .yellow.light{background-color:#fefbf6!important;color:#f5b54d!important;border-color:#f2a11d!important}.toast.citron,.toast .citron{background-color:#cac747!important;color:#fff!important;border-color:#acaa32!important}.toast.citron:hover,.toast .citron:hover{background-color:#acaa32}.toast.citron-text,.toast .citron-text{color:#cac747!important}.toast.citron-bg,.toast .citron-bg{background-color:#cac747!important}.toast.citron-border,.toast .citron-border{border-color:#cac747!important}.toast.citron.light,.toast .citron.light{background-color:#f2f1d2!important;color:#cac747!important;border-color:#acaa32!important}.toast.lime,.toast .lime{background-color:#85ab39!important;color:#fff!important;border-color:#67852c!important}.toast.lime:hover,.toast .lime:hover{background-color:#67852c}.toast.lime-text,.toast .lime-text{color:#85ab39!important}.toast.lime-bg,.toast .lime-bg{background-color:#85ab39!important}.toast.lime-border,.toast .lime-border{border-color:#85ab39!important}.toast.lime.light,.toast .lime.light{background-color:#d4e5b1!important;color:#85ab39!important;border-color:#67852c!important}.toast.green,.toast .green{background-color:#48992f!important;color:#fff!important;border-color:#367223!important}.toast.green:hover,.toast .green:hover{background-color:#367223}.toast.green-text,.toast .green-text{color:#48992f!important}.toast.green-bg,.toast .green-bg{background-color:#48992f!important}.toast.green-border,.toast .green-border{border-color:#48992f!important}.toast.green.light,.toast .green.light{background-color:#abe09a!important;color:#48992f!important;border-color:#367223!important}.toast.mint,.toast .mint{background-color:#3a874f!important;color:#fff!important;border-color:#2b633a!important}.toast.mint:hover,.toast .mint:hover{background-color:#2b633a}.toast.mint-text,.toast .mint-text{color:#3a874f!important}.toast.mint-bg,.toast .mint-bg{background-color:#3a874f!important}.toast.mint-border,.toast .mint-border{border-color:#3a874f!important}.toast.mint.light,.toast .mint.light{background-color:#9ed5ad!important;color:#3a874f!important;border-color:#2b633a!important}.toast.teal,.toast .teal{background-color:#449698!important;color:#fff!important;border-color:#347375!important}.toast.teal:hover,.toast .teal:hover{background-color:#347375}.toast.teal-text,.toast .teal-text{color:#449698!important}.toast.teal-bg,.toast .teal-bg{background-color:#449698!important}.toast.teal-border,.toast .teal-border{border-color:#449698!important}.toast.teal.light,.toast .teal.light{background-color:#b2dcdd!important;color:#449698!important;border-color:#347375!important}.toast.cyan,.toast .cyan{background-color:#4d9bcc!important;color:#fff!important;border-color:#3382b3!important}.toast.cyan:hover,.toast .cyan:hover{background-color:#3382b3}.toast.cyan-text,.toast .cyan-text{color:#4d9bcc!important}.toast.cyan-bg,.toast .cyan-bg{background-color:#4d9bcc!important}.toast.cyan-border,.toast .cyan-border{border-color:#4d9bcc!important}.toast.cyan.light,.toast .cyan.light{background-color:#d8e9f4!important;color:#4d9bcc!important;border-color:#3382b3!important}.toast.blue,.toast .blue{background-color:#4e7af8!important;color:#fff!important;border-color:#1d55f6!important}.toast.blue:hover,.toast .blue:hover{background-color:#1d55f6}.toast.blue-text,.toast .blue-text{color:#4e7af8!important}.toast.blue-bg,.toast .blue-bg{background-color:#4e7af8!important}.toast.blue-border,.toast .blue-border{border-color:#4e7af8!important}.toast.blue.light,.toast .blue.light{background-color:#fafbff!important;color:#4e7af8!important;border-color:#1d55f6!important}.toast.indigo,.toast .indigo{background-color:#5642ed!important;color:#fff!important;border-color:#2e16e6!important}.toast.indigo:hover,.toast .indigo:hover{background-color:#2e16e6}.toast.indigo-text,.toast .indigo-text{color:#5642ed!important}.toast.indigo-bg,.toast .indigo-bg{background-color:#5642ed!important}.toast.indigo-border,.toast .indigo-border{border-color:#5642ed!important}.toast.indigo.light,.toast .indigo.light{background-color:#e8e5fd!important;color:#5642ed!important;border-color:#2e16e6!important}.toast.purple,.toast .purple{background-color:#8756f3!important;color:#fff!important;border-color:#6526f0!important}.toast.purple:hover,.toast .purple:hover{background-color:#6526f0}.toast.purple-text,.toast .purple-text{color:#8756f3!important}.toast.purple-bg,.toast .purple-bg{background-color:#8756f3!important}.toast.purple-border,.toast .purple-border{border-color:#8756f3!important}.toast.purple.light,.toast .purple.light{background-color:#fdfdff!important;color:#8756f3!important;border-color:#6526f0!important}.toast.pink,.toast .pink{background-color:#bf3da0!important;color:#fff!important;border-color:#983180!important}.toast.pink:hover,.toast .pink:hover{background-color:#983180}.toast.pink-text,.toast .pink-text{color:#bf3da0!important}.toast.pink-bg,.toast .pink-bg{background-color:#bf3da0!important}.toast.pink-border,.toast .pink-border{border-color:#bf3da0!important}.toast.pink.light,.toast .pink.light{background-color:#ecc3e2!important;color:#bf3da0!important;border-color:#983180!important}.toast.rose,.toast .rose{background-color:#bb3a62!important;color:#fff!important;border-color:#942e4e!important}.toast.rose:hover,.toast .rose:hover{background-color:#942e4e}.toast.rose-text,.toast .rose-text{color:#bb3a62!important}.toast.rose-bg,.toast .rose-bg{background-color:#bb3a62!important}.toast.rose-border,.toast .rose-border{border-color:#bb3a62!important}.toast.rose.light,.toast .rose.light{background-color:#ebbdcb!important;color:#bb3a62!important;border-color:#942e4e!important}.toast-board{position:fixed;display:flex;flex-direction:column;z-index:9999}.toast-board.on-top{flex-direction:column-reverse}.toast-board.top-left{top:0;left:0}.toast-board.top-center{top:0;left:50%;transform:translate(-50%)}.toast-board.top-right{top:0;right:0}.toast-board.top-full-width{top:0;left:50%;transform:translate(-50%);width:80%}.toast-board.top-full-width .toast{width:100%}.toast-board.bottom-left{bottom:0;left:0}.toast-board.bottom-center{bottom:0;left:50%;transform:translate(-50%)}.toast-board.bottom-right{bottom:0;right:0}.toast-board.bottom-full-width{bottom:0;left:50%;transform:translate(-50%);width:80%}.toast-board.bottom-full-width .toast{width:100%}.toast-board .toast{position:relative;display:flex;justify-content:flex-start;width:400px;margin:5px;color:#333;border-radius:4px;box-shadow:2px 5px 5px #00000029;background-color:#fff;transition-property:opacity,transform;transition-duration:.5s,1s;line-height:1em;vertical-align:baseline;opacity:0;font-size:1.2em;overflow:hidden;animation:swing-off .5s ease}.toast-board .toast.fade{opacity:.95;transform:translate(0)}.toast-board .toast.swing{animation:swing .5s ease;opacity:.95}.toast-board .toast.round{border-radius:2em}.toast-board .toast .toast-contents{flex-grow:1;padding:10px 25px 10px 10px;max-width:calc(100% - 50px);font-size:.8em;overflow-wrap:break-word}.toast-board .toast .toast-contents h5{font-weight:700;font-size:1.2em;margin-bottom:10px}.toast-board .toast .toast-close{flex-shrink:1;cursor:pointer;padding:20px;line-height:1em;position:absolute;top:50%;right:0;transform:translateY(-50%);font-size:1em;color:inherit}.toast-board .toast .toast-icon{flex-shrink:1;padding:10px}.toast-board .toast .toast-icon>svg{height:1em}.toast-board .toast.line-left .toast-contents{border-left:5px solid}.toast-board .toast.line-top .toast-contents{border-top:5px solid}.toast-board:is(.top-left,.bottom-left) .toast{animation-name:swing-reverse-off}.toast-board:is(.top-left,.bottom-left) .toast.swing{animation-name:swing-reverse}.toast-board:is(.top-center,.top-full) .toast{animation-name:pull-down-off}.toast-board:is(.top-center,.top-full) .toast.swing{animation-name:pull-down}.toast-board:is(.bottom-center,.bottom-full) .toast{animation-name:pull-up-off}.toast-board:is(.bottom-center,.bottom-full) .toast.swing{animation-name:pull-up}@keyframes swing{0%{transform:translate(300px);opacity:0}25%{transform:translate(20px)}75%{transform:translate(-10px);opacity:.95}to{transform:translate(0)}}@keyframes swing-off{0%{transform:translate(0)}25%{transform:translate(-10px)}75%{transform:translate(20px)}to{transform:translate(300px)}}@keyframes swing-reverse{0%{transform:translate(-300px);opacity:0}25%{transform:translate(-20px)}75%{transform:translate(10px);opacity:.95}to{transform:translate(0)}}@keyframes swing-reverse-off{0%{transform:translate(0)}25%{transform:translate(10px)}75%{transform:translate(-20px)}to{transform:translate(-300px)}}@keyframes pull-up{0%{transform:translateY(30px);opacity:0}25%{transform:translateY(10px)}75%{transform:translateY(-5px);opacity:.95}to{transform:translateY(0)}}@keyframes pull-up-off{0%{transform:translateY(0)}25%{transform:translateY(5px)}75%{transform:translateY(-10px)}to{transform:translateY(-30px)}}@keyframes pull-down{0%{transform:translateY(-30px);opacity:0}25%{transform:translateY(-10px)}75%{transform:translateY(5px);opacity:.95}to{transform:translateY(0)}}@keyframes pull-down-off{0%{transform:translateY(0)}25%{transform:translateY(-5px)}75%{transform:translateY(10px)}to{transform:translateY(30px)}}
+button{border:0 none;background-color:transparent;cursor:pointer}.toast.success,.toast .success{background-color:#528e64!important;color:#fff!important;border-color:#3f6e4d!important}.toast.success:hover,.toast .success:hover{background-color:#3f6e4d}.toast.success-text,.toast .success-text{color:#528e64!important}.toast.success-bg,.toast .success-bg{background-color:#528e64!important}.toast.success-border,.toast .success-border{border-color:#3f6e4d!important}.toast.success.light,.toast .success.light{background-color:#cbe1d2!important;color:#528e64!important;border-color:#3f6e4d!important}.toast.info,.toast .info{background-color:#62b0bc!important;color:#fff!important;border-color:#4698a5!important}.toast.info:hover,.toast .info:hover{background-color:#4698a5}.toast.info-text,.toast .info-text{color:#62b0bc!important}.toast.info-bg,.toast .info-bg{background-color:#62b0bc!important}.toast.info-border,.toast .info-border{border-color:#4698a5!important}.toast.info.light,.toast .info.light{background-color:#d4e9ed!important;color:#62b0bc!important;border-color:#4698a5!important}.toast.danger,.toast .danger{background-color:#d53012!important;color:#fff!important;border-color:#a6250e!important}.toast.danger:hover,.toast .danger:hover{background-color:#a6250e}.toast.danger-text,.toast .danger-text{color:#d53012!important}.toast.danger-bg,.toast .danger-bg{background-color:#d53012!important}.toast.danger-border,.toast .danger-border{border-color:#a6250e!important}.toast.danger.light,.toast .danger.light{background-color:#fbe0da!important;color:#d53012!important;border-color:#a6250e!important}.toast.attention,.toast .attention{background-color:#ec6e00!important;color:#fff!important;border-color:#b95600!important}.toast.attention:hover,.toast .attention:hover{background-color:#b95600}.toast.attention-text,.toast .attention-text{color:#ec6e00!important}.toast.attention-bg,.toast .attention-bg{background-color:#ec6e00!important}.toast.attention-border,.toast .attention-border{border-color:#b95600!important}.toast.attention.light,.toast .attention.light{background-color:#ffe9d6!important;color:#ec6e00!important;border-color:#b95600!important}.toast.importance,.toast .importance{background-color:#fdc036!important;color:#fff!important;border-color:#fcb004!important}.toast.importance:hover,.toast .importance:hover{background-color:#fcb004}.toast.importance-text,.toast .importance-text{color:#fdc036!important}.toast.importance-bg,.toast .importance-bg{background-color:#fdc036!important}.toast.importance-border,.toast .importance-border{border-color:#fcb004!important}.toast.importance.light,.toast .importance.light{background-color:#fff3d7!important;color:#fdc036!important;border-color:#fcb004!important}.toast.red,.toast .red{background-color:#d93b3b!important;color:#fff!important;border-color:#bc2525!important}.toast.red:hover,.toast .red:hover{background-color:#bc2525}.toast.red-text,.toast .red-text{color:#d93b3b!important}.toast.red-bg,.toast .red-bg{background-color:#d93b3b!important}.toast.red-border,.toast .red-border{border-color:#d93b3b!important}.toast.red.light,.toast .red.light{background-color:#f6d1d1!important;color:#d93b3b!important;border-color:#bc2525!important}.toast.sunset,.toast .sunset{background-color:#d44d32!important;color:#fff!important;border-color:#ae3c25!important}.toast.sunset:hover,.toast .sunset:hover{background-color:#ae3c25}.toast.sunset-text,.toast .sunset-text{color:#d44d32!important}.toast.sunset-bg,.toast .sunset-bg{background-color:#d44d32!important}.toast.sunset-border,.toast .sunset-border{border-color:#d44d32!important}.toast.sunset.light,.toast .sunset.light{background-color:#f3cdc6!important;color:#d44d32!important;border-color:#ae3c25!important}.toast.orange,.toast .orange{background-color:#d95b2c!important;color:#fff!important;border-color:#b24820!important}.toast.orange:hover,.toast .orange:hover{background-color:#b24820}.toast.orange-text,.toast .orange-text{color:#d95b2c!important}.toast.orange-bg,.toast .orange-bg{background-color:#d95b2c!important}.toast.orange-border,.toast .orange-border{border-color:#d95b2c!important}.toast.orange.light,.toast .orange.light{background-color:#f4d1c3!important;color:#d95b2c!important;border-color:#b24820!important}.toast.amber,.toast .amber{background-color:#d3873f!important;color:#fff!important;border-color:#b56e2a!important}.toast.amber:hover,.toast .amber:hover{background-color:#b56e2a}.toast.amber-text,.toast .amber-text{color:#d3873f!important}.toast.amber-bg,.toast .amber-bg{background-color:#d3873f!important}.toast.amber-border,.toast .amber-border{border-color:#d3873f!important}.toast.amber.light,.toast .amber.light{background-color:#f4e2d0!important;color:#d3873f!important;border-color:#b56e2a!important}.toast.yellow,.toast .yellow{background-color:#f5b54d!important;color:#fff!important;border-color:#f2a11d!important}.toast.yellow:hover,.toast .yellow:hover{background-color:#f2a11d}.toast.yellow-text,.toast .yellow-text{color:#f5b54d!important}.toast.yellow-bg,.toast .yellow-bg{background-color:#f5b54d!important}.toast.yellow-border,.toast .yellow-border{border-color:#f5b54d!important}.toast.yellow.light,.toast .yellow.light{background-color:#fefbf6!important;color:#f5b54d!important;border-color:#f2a11d!important}.toast.citron,.toast .citron{background-color:#cac747!important;color:#fff!important;border-color:#acaa32!important}.toast.citron:hover,.toast .citron:hover{background-color:#acaa32}.toast.citron-text,.toast .citron-text{color:#cac747!important}.toast.citron-bg,.toast .citron-bg{background-color:#cac747!important}.toast.citron-border,.toast .citron-border{border-color:#cac747!important}.toast.citron.light,.toast .citron.light{background-color:#f2f1d2!important;color:#cac747!important;border-color:#acaa32!important}.toast.lime,.toast .lime{background-color:#85ab39!important;color:#fff!important;border-color:#67852c!important}.toast.lime:hover,.toast .lime:hover{background-color:#67852c}.toast.lime-text,.toast .lime-text{color:#85ab39!important}.toast.lime-bg,.toast .lime-bg{background-color:#85ab39!important}.toast.lime-border,.toast .lime-border{border-color:#85ab39!important}.toast.lime.light,.toast .lime.light{background-color:#d4e5b1!important;color:#85ab39!important;border-color:#67852c!important}.toast.green,.toast .green{background-color:#48992f!important;color:#fff!important;border-color:#367223!important}.toast.green:hover,.toast .green:hover{background-color:#367223}.toast.green-text,.toast .green-text{color:#48992f!important}.toast.green-bg,.toast .green-bg{background-color:#48992f!important}.toast.green-border,.toast .green-border{border-color:#48992f!important}.toast.green.light,.toast .green.light{background-color:#abe09a!important;color:#48992f!important;border-color:#367223!important}.toast.mint,.toast .mint{background-color:#3a874f!important;color:#fff!important;border-color:#2b633a!important}.toast.mint:hover,.toast .mint:hover{background-color:#2b633a}.toast.mint-text,.toast .mint-text{color:#3a874f!important}.toast.mint-bg,.toast .mint-bg{background-color:#3a874f!important}.toast.mint-border,.toast .mint-border{border-color:#3a874f!important}.toast.mint.light,.toast .mint.light{background-color:#9ed5ad!important;color:#3a874f!important;border-color:#2b633a!important}.toast.teal,.toast .teal{background-color:#449698!important;color:#fff!important;border-color:#347375!important}.toast.teal:hover,.toast .teal:hover{background-color:#347375}.toast.teal-text,.toast .teal-text{color:#449698!important}.toast.teal-bg,.toast .teal-bg{background-color:#449698!important}.toast.teal-border,.toast .teal-border{border-color:#449698!important}.toast.teal.light,.toast .teal.light{background-color:#b2dcdd!important;color:#449698!important;border-color:#347375!important}.toast.cyan,.toast .cyan{background-color:#4d9bcc!important;color:#fff!important;border-color:#3382b3!important}.toast.cyan:hover,.toast .cyan:hover{background-color:#3382b3}.toast.cyan-text,.toast .cyan-text{color:#4d9bcc!important}.toast.cyan-bg,.toast .cyan-bg{background-color:#4d9bcc!important}.toast.cyan-border,.toast .cyan-border{border-color:#4d9bcc!important}.toast.cyan.light,.toast .cyan.light{background-color:#d8e9f4!important;color:#4d9bcc!important;border-color:#3382b3!important}.toast.blue,.toast .blue{background-color:#4e7af8!important;color:#fff!important;border-color:#1d55f6!important}.toast.blue:hover,.toast .blue:hover{background-color:#1d55f6}.toast.blue-text,.toast .blue-text{color:#4e7af8!important}.toast.blue-bg,.toast .blue-bg{background-color:#4e7af8!important}.toast.blue-border,.toast .blue-border{border-color:#4e7af8!important}.toast.blue.light,.toast .blue.light{background-color:#fafbff!important;color:#4e7af8!important;border-color:#1d55f6!important}.toast.indigo,.toast .indigo{background-color:#5642ed!important;color:#fff!important;border-color:#2e16e6!important}.toast.indigo:hover,.toast .indigo:hover{background-color:#2e16e6}.toast.indigo-text,.toast .indigo-text{color:#5642ed!important}.toast.indigo-bg,.toast .indigo-bg{background-color:#5642ed!important}.toast.indigo-border,.toast .indigo-border{border-color:#5642ed!important}.toast.indigo.light,.toast .indigo.light{background-color:#e8e5fd!important;color:#5642ed!important;border-color:#2e16e6!important}.toast.purple,.toast .purple{background-color:#8756f3!important;color:#fff!important;border-color:#6526f0!important}.toast.purple:hover,.toast .purple:hover{background-color:#6526f0}.toast.purple-text,.toast .purple-text{color:#8756f3!important}.toast.purple-bg,.toast .purple-bg{background-color:#8756f3!important}.toast.purple-border,.toast .purple-border{border-color:#8756f3!important}.toast.purple.light,.toast .purple.light{background-color:#fdfdff!important;color:#8756f3!important;border-color:#6526f0!important}.toast.pink,.toast .pink{background-color:#bf3da0!important;color:#fff!important;border-color:#983180!important}.toast.pink:hover,.toast .pink:hover{background-color:#983180}.toast.pink-text,.toast .pink-text{color:#bf3da0!important}.toast.pink-bg,.toast .pink-bg{background-color:#bf3da0!important}.toast.pink-border,.toast .pink-border{border-color:#bf3da0!important}.toast.pink.light,.toast .pink.light{background-color:#ecc3e2!important;color:#bf3da0!important;border-color:#983180!important}.toast.rose,.toast .rose{background-color:#bb3a62!important;color:#fff!important;border-color:#942e4e!important}.toast.rose:hover,.toast .rose:hover{background-color:#942e4e}.toast.rose-text,.toast .rose-text{color:#bb3a62!important}.toast.rose-bg,.toast .rose-bg{background-color:#bb3a62!important}.toast.rose-border,.toast .rose-border{border-color:#bb3a62!important}.toast.rose.light,.toast .rose.light{background-color:#ebbdcb!important;color:#bb3a62!important;border-color:#942e4e!important}.toast-board{position:fixed;display:flex;flex-direction:column;z-index:9999}.toast-board.on-top{flex-direction:column-reverse}.toast-board.top-left{top:0;left:0}.toast-board.top-center{top:0;left:50%;transform:translate(-50%)}.toast-board.top-right{top:0;right:0}.toast-board.top-full-width{top:0;left:50%;transform:translate(-50%);width:80%}.toast-board.top-full-width .toast{width:100%}.toast-board.bottom-left{bottom:0;left:0}.toast-board.bottom-center{bottom:0;left:50%;transform:translate(-50%)}.toast-board.bottom-right{bottom:0;right:0}.toast-board.bottom-full-width{bottom:0;left:50%;transform:translate(-50%);width:80%}.toast-board.bottom-full-width .toast{width:100%}.toast-board .toast{position:relative;display:flex;justify-content:flex-start;width:400px;margin:5px;color:#333;border-radius:8px;box-shadow:2px 5px 5px #00000029,0 0 8px 5px #0000000a;background-color:#fff;transition-property:opacity,transform;transition-duration:.5s,1s;line-height:1em;vertical-align:baseline;opacity:0;font-size:1rem;overflow:hidden;animation:swing-off .5s ease}.toast-board .toast.fade{opacity:.95;transform:translate(0)}.toast-board .toast.swing{animation:swing .5s ease;opacity:.95}.toast-board .toast.round{border-radius:2em}.toast-board .toast .toast-contents{flex-grow:1;padding:10px 25px 10px 10px;max-width:calc(100% - 50px);font-size:.8em;overflow-wrap:break-word}.toast-board .toast .toast-contents .title{font-weight:700;font-size:1.2em;margin-bottom:5px}.toast-board .toast .toast-close{flex-shrink:1;cursor:pointer;padding:20px;line-height:1em;position:absolute;top:50%;right:0;transform:translateY(-50%);font-size:1em;color:inherit}.toast-board .toast .toast-icon{flex-shrink:1;padding:10px}.toast-board .toast .toast-icon>svg{height:1em}.toast-board .toast.line-left .toast-contents{border-left:5px solid}.toast-board .toast.line-top .toast-contents{border-top:5px solid}.toast-board:is(.top-left,.bottom-left) .toast{animation-name:swing-reverse-off}.toast-board:is(.top-left,.bottom-left) .toast.swing{animation-name:swing-reverse}.toast-board:is(.top-center,.top-full) .toast{animation-name:pull-down-off}.toast-board:is(.top-center,.top-full) .toast.swing{animation-name:pull-down}.toast-board:is(.bottom-center,.bottom-full) .toast{animation-name:pull-up-off}.toast-board:is(.bottom-center,.bottom-full) .toast.swing{animation-name:pull-up}@keyframes swing{0%{transform:translate(300px);opacity:0}25%{transform:translate(20px)}75%{transform:translate(-10px);opacity:.95}to{transform:translate(0)}}@keyframes swing-off{0%{transform:translate(0)}25%{transform:translate(-10px)}75%{transform:translate(20px)}to{transform:translate(300px)}}@keyframes swing-reverse{0%{transform:translate(-300px);opacity:0}25%{transform:translate(-20px)}75%{transform:translate(10px);opacity:.95}to{transform:translate(0)}}@keyframes swing-reverse-off{0%{transform:translate(0)}25%{transform:translate(10px)}75%{transform:translate(-20px)}to{transform:translate(-300px)}}@keyframes pull-up{0%{transform:translateY(30px);opacity:0}25%{transform:translateY(10px)}75%{transform:translateY(-5px);opacity:.95}to{transform:translateY(0)}}@keyframes pull-up-off{0%{transform:translateY(0)}25%{transform:translateY(5px)}75%{transform:translateY(-10px)}to{transform:translateY(-30px)}}@keyframes pull-down{0%{transform:translateY(-30px);opacity:0}25%{transform:translateY(-10px)}75%{transform:translateY(5px);opacity:.95}to{transform:translateY(0)}}@keyframes pull-down-off{0%{transform:translateY(0)}25%{transform:translateY(-5px)}75%{transform:translateY(10px)}to{transform:translateY(30px)}}@media (max-width: 400px){.toast-board{width:100%}.toast-board .toast{width:calc(100% - 10px)}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-nt-toast",
-  "version": "0.3.2",
+  "version": "0.3.4",
   "description": "Toast system plugin with vue3",
   "author": "Minyoung Tommy Kim",
   "private": false,

package/src/index.js

@@ -6,14 +6,15 @@ const defaultOptions = {
   useTitle: true,
   useIcon: true,
   closeButton: true,
-  round: false,
-  theme: '',
-  timeout: 5000,
   clickToClose: true,
-  displayOnTop: false,
+  round: false,
+  theme: 'default',
+  position: 'bottom-right',
+  displayOnTop: true,
   snackbar: false,
-  freeze: true,
-  transition: 'swing'
+  freeze: false,
+  transition: 'swing',
+  timeout: 5000
 }
 
 let extendOptions = {}
@@ -25,7 +26,6 @@ export default {
   install(app, options = {}) {
     extendOptions = setOption(options)
     app.config.globalProperties.$ntToast = new ToastBoard(extendOptions)
-
     app.provide('$ntToast', new ToastBoard(extendOptions))
   }
 }