vue-nt-toast 0.1.3 → 0.1.4

package/package.json

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

package/src/index.js

@@ -12,7 +12,8 @@ const defaultOptions = {
   clickToClose: true,
   displayOnTop: false,
   snackbar: false,
-  freeze: true
+  freeze: true,
+  transition: 'swing'
 }
 
 let extendOptions = {}

package/src/toast.js

@@ -56,7 +56,7 @@ class Toast {
     if (!this.options.useIcon || this.options.theme === 'line') return
     this.icon = document.createElement('div')
     this.icon.classList.add('toast-icon')
-    const iconClass = statusIcon[this.type] || 'hexagon-exclamation'
+    const iconClass = statusIcon[this.type] || 'exclamation-circle'
     this.icon.innerHTML = `<i class="fa fa-${iconClass}" />`
     // this.icon.innerHTML = `<img src="./icons/success.svg" />`
     // this.toast.appendChild(this.icon)

package/src/toast.scss

@@ -228,6 +228,24 @@ $colors: (
         }
       }
     }
+    &:is(.top-left, .bottom-left) .toast {
+      animation-name: swing-reverse-off;
+      &.swing {
+        animation-name: swing-reverse;
+      }
+    }
+    &:is(.top-center, .top-full-width) .toast {
+      animation-name: pull-up-off;
+      &.swing {
+        animation-name: pull-up;
+      }
+    }
+    &:is(.bottom-center, .bottom-full-width) .toast {
+      animation-name: pull-down-off;
+      &.swing {
+        animation-name: pull-down;
+      }
+    }
     // .ga-primary {
     //   background-color: $primary;
     //   color: $white;
@@ -273,4 +291,106 @@ $colors: (
       //opacity: 0;
     }
   
+  }
+  @keyframes swing-reverse {
+    0% {
+      transform: translateX(-300px);
+      opacity: 0;
+    }
+    25% {
+      transform: translateX(-20px);
+    }
+    75% {
+      transform: translateX(10px);
+      opacity: .95;
+    }
+    100% {
+      transform: translateX(0px);
+    }
+  
+  }
+  @keyframes swing-reverse-off {
+    0% {
+      transform: translateX(0px);
+    }
+    25% {
+      transform: translateX(10px);
+      //opacity: 0.95;
+    }
+    75% {
+      transform: translateX(-20px);
+    }
+    100% {
+      transform: translateX(-300px);
+      //opacity: 0;
+    }
+  
+  }
+  @keyframes pull-up {
+    0% {
+      transform: translateY(30px);
+      opacity: 0;
+    }
+    25% {
+      transform: translateY(10px);
+    }
+    75% {
+      transform: translateY(-5px);
+      opacity: .95;
+    }
+    100% {
+      transform: translateY(0px);
+    }
+  
+  }
+  @keyframes pull-up-off {
+    0% {
+      transform: translateY(0px);
+    }
+    25% {
+      transform: translateY(5px);
+      //opacity: 0.95;
+    }
+    75% {
+      transform: translateY(-10px);
+    }
+    100% {
+      transform: translateY(-30px);
+      //opacity: 0;
+    }
+  
+  }
+  @keyframes pull-down {
+    0% {
+      transform: translateY(-30px);
+      opacity: 0;
+    }
+    25% {
+      transform: translateY(-10px);
+    }
+    75% {
+      transform: translateY(5px);
+      opacity: .95;
+    }
+    100% {
+      transform: translateY(0px);
+    }
+  
+  }
+  @keyframes pull-down-off {
+    0% {
+      transform: translateY(0px);
+    }
+    25% {
+      transform: translateY(-5px);
+      //opacity: 0.95;
+    }
+    75% {
+      transform: translateY(10px);
+    }
+    100% {
+      transform: translateY(30px);
+      //opacity: 0;
+    }
+  
   }