vue-nt-toast 0.1.3 → 0.2.0

package/README.md

@@ -63,19 +63,21 @@ app.use(NtToast, defaultOptions)
 
 ```javascript
 // get Proxy in current instance 
-import { getCurrentInctance } from 'vue';
-
+// import { getCurrentInctance } from 'vue';
+import { inject } from 'vue'
 // composition api or setup
-const { proxy } = getCurrentInstance();
+// const { proxy } = getCurrentInstance();
+
+const toast = inject('$ntToast')
 ```
 ### Creating toast (Show toast)
 ```javascript
 // show success toast
-proxy.$ntToast.show('success', ..., ...)
+toast.show('success', ..., ...)
 
 // show another type
-proxy.$ntToast.show('info', ..., ...)
-proxy.$ntToast.show('danger', ..., ...)
+toast.show('info', ..., ...)
+toast.show('danger', ..., ...)
 ```
 ---
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-nt-toast",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "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 = {}
@@ -23,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,11 +53,13 @@ class Toast {
   //     clearTimeout(this.interval)
   //   })
   // }
+
+  
   setIcon() {
     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,17 +228,24 @@ $colors: (
         }
       }
     }
-    // .ga-primary {
-    //   background-color: $primary;
-    //   color: $white;
-    //   &-text {
-    //     color: $primary;
-    //   }
-    // }
-    // .ga-secondary {
-    //   background-color: $secondary;
-    //   color: $white;
-    // }
+    &:is(.top-left, .bottom-left) .toast {
+      animation-name: swing-reverse-off;
+      &.swing {
+        animation-name: swing-reverse;
+      }
+    }
+    &:is(.top-center, .top-full) .toast {
+      animation-name: pull-down-off;
+      &.swing {
+        animation-name: pull-down;
+      }
+    }
+    &:is(.bottom-center, .bottom-full) .toast {
+      animation-name: pull-up-off;
+      &.swing {
+        animation-name: pull-up;
+      }
+    }
   }
   @keyframes swing {
     0% {
@@ -273,4 +280,100 @@ $colors: (
       //opacity: 0;
     }
   
+  }
+  @keyframes swing-reverse {
+    0% {
+      transform: translateX(-300px);
+      opacity: 0;
+    }
+    25% {
+      transform: translateX(-20px);
+    }
+    75% {
+      transform: translateX(10px);
+      opacity: 0.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: 0.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: 0.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;
+    }
   }