vue-nt-toast 0.1.4 → 0.2.0

package/dist/toast.css

@@ -0,0 +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.line-left .toast-contents{border-left:5px solid}.toast-board .toast.line-top .toast-contents{border-top:5px solid}@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)}}

package/package.json

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

package/src/index.js

@@ -24,6 +24,8 @@ const setOption = option => {
 export default {
   install(app, options = {}) {
     extendOptions = setOption(options)
-    app.config.globalProperties.$gaToast = new ToastBoard(extendOptions)
+    app.config.globalProperties.$ntToast = new ToastBoard(extendOptions)
+
+    app.provide('$ntToast', new ToastBoard(extendOptions))
   }
 }

package/src/toast.js

@@ -22,6 +22,7 @@ class Toast {
     this.toast = document.createElement('div')
     this.toast.classList.add('toast', 'swing')
     // const contents = document.createElement('div')
+
     const contents = this.setContents()
     this.setIcon()
     if (this.options.round) {
@@ -52,6 +53,8 @@ class Toast {
   //     clearTimeout(this.interval)
   //   })
   // }
+
+  
   setIcon() {
     if (!this.options.useIcon || this.options.theme === 'line') return
     this.icon = document.createElement('div')

package/src/toast.scss

@@ -234,29 +234,18 @@ $colors: (
         animation-name: swing-reverse;
       }
     }
-    &:is(.top-center, .top-full-width) .toast {
-      animation-name: pull-up-off;
+    &:is(.top-center, .top-full) .toast {
+      animation-name: pull-down-off;
       &.swing {
-        animation-name: pull-up;
+        animation-name: pull-down;
       }
     }
-    &:is(.bottom-center, .bottom-full-width) .toast {
-      animation-name: pull-down-off;
+    &:is(.bottom-center, .bottom-full) .toast {
+      animation-name: pull-up-off;
       &.swing {
-        animation-name: pull-down;
+        animation-name: pull-up;
       }
     }
-    // .ga-primary {
-    //   background-color: $primary;
-    //   color: $white;
-    //   &-text {
-    //     color: $primary;
-    //   }
-    // }
-    // .ga-secondary {
-    //   background-color: $secondary;
-    //   color: $white;
-    // }
   }
   @keyframes swing {
     0% {
@@ -302,12 +291,11 @@ $colors: (
     }
     75% {
       transform: translateX(10px);
-      opacity: .95;
+      opacity: 0.95;
     }
     100% {
       transform: translateX(0px);
     }
-  
   }
   @keyframes swing-reverse-off {
     0% {
@@ -324,7 +312,6 @@ $colors: (
       transform: translateX(-300px);
       //opacity: 0;
     }
-  
   }
   @keyframes pull-up {
     0% {
@@ -336,12 +323,11 @@ $colors: (
     }
     75% {
       transform: translateY(-5px);
-      opacity: .95;
+      opacity: 0.95;
     }
     100% {
       transform: translateY(0px);
     }
-  
   }
   @keyframes pull-up-off {
     0% {
@@ -358,7 +344,6 @@ $colors: (
       transform: translateY(-30px);
       //opacity: 0;
     }
-  
   }
   @keyframes pull-down {
     0% {
@@ -370,12 +355,11 @@ $colors: (
     }
     75% {
       transform: translateY(5px);
-      opacity: .95;
+      opacity: 0.95;
     }
     100% {
       transform: translateY(0px);
     }
-  
   }
   @keyframes pull-down-off {
     0% {
@@ -392,5 +376,4 @@ $colors: (
       transform: translateY(30px);
       //opacity: 0;
     }
-  
   }