vue-nt-toast 0.1.2 → 0.1.4

package/README.md

@@ -22,6 +22,12 @@ You can set multiple options across the system, including theme, location, and s
 
 테마, 위치, 스낵바 모드 등 여러 옵션을 전역에서 설정 하여 전체 시스템에 반영 하도록 할수있고, 사용자가 실행 할때 마다 변경 가능한 옵션을 적용 할수도 있습니다. 
 
+---
+
+## Demo
+
+[vue-nt-toast](https://noistommy.github.io/vue-nt-toast) demo page.
+
 ---
 ## Installation
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-nt-toast",
-  "version": "0.1.2",
+  "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

@@ -100,7 +100,6 @@ $colors: (
     display: flex;
     flex-direction: column;
     z-index: 9999;
-    top: 0;
     &.on-top {
       flex-direction: column-reverse;
     }
@@ -229,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;
@@ -274,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;
+    }
+  
   }