vue-nt-toast 0.1.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;top:0}.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

@@ -0,0 +1,57 @@
+{
+  "name": "vue-nt-toast",
+  "version": "0.1.0",
+  "description": "Toast system plugin with vue3",
+  "author": "Minyoung Tommy Kim",
+  "private": false,
+  "scripts": {
+    "dev": "MODE=demo vite",
+    "build": "npm run build:code",
+    "build:code": "MODE=lib vite build",
+    "build:demo": "MODE=demo vite build",
+    "preview": "vite preview",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
+    "format": "prettier --write src/"
+  },
+  "main": "./dist/nt-toast.umd.js",
+  "module": "./dist/nt-toast.es.js",
+  "exports": {
+    ".": {
+      "import": "./dist/nt-toast.es.js",
+      "require": "./dist/nt-toast.umd.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "bugs": {
+    "url": "https://github.com/noistommy/vue-nt-toast/issues"
+  },
+  "homepage": "https://github.com/noistommy/vue-nt-toast#readme",
+  "keywords": [
+    "vue",
+    "notification",
+    "toast"
+  ],
+  "style": "./dist/toast.css",
+  "peerDependencies": {
+    "@fortawesome/fontawesome-free": "^6.4.2",
+    "vue": "^3.3.4"
+  },
+  "devDependencies": {
+    "@rushstack/eslint-patch": "^1.3.2",
+    "@vitejs/plugin-vue": "^4.3.1",
+    "@vue/eslint-config-prettier": "^8.0.0",
+    "eslint": "^8.46.0",
+    "eslint-plugin-vue": "^9.16.1",
+    "font-awesome": "^4.7.0",
+    "prettier": "^3.0.0",
+    "sass": "^1.66.1",
+    "vite": "^4.4.9"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/noistommy/vue-nt-toast.git"
+  }
+}

package/src/index.js

@@ -0,0 +1,28 @@
+import ToastBoard from './toastBoard'
+import './toast.scss'
+import '@fortawesome/fontawesome-free/js/all.js'
+
+const defaultOptions = {
+  useTitle: true,
+  useIcon: true,
+  closeButton: true,
+  round: false,
+  theme: '',
+  timeout: 5000,
+  clickToClose: true,
+  displayOnTop: false,
+  snackbar: false,
+  freeze: true
+}
+
+let extendOptions = {}
+const setOption = option => {
+  return { ...defaultOptions, ...option }
+}
+
+export default {
+  install(app, options = {}) {
+    extendOptions = setOption(options)
+    app.config.globalProperties.$gaToast = new ToastBoard(extendOptions)
+  }
+}

package/src/toast.js

@@ -0,0 +1,85 @@
+const statusIcon = {
+  success: 'check-circle',
+  info: 'info-circle',
+  danger: 'exclamation-circle',
+  attention: 'exclamation-triangle',
+  importance: 'star'
+}
+
+class Toast {
+  constructor(type, msg, options) {
+    this.type = type
+    this.msg = msg
+    this.options = options
+    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 contents = document.createElement('div')
+    const contents = this.setContents()
+    this.setIcon()
+    if (this.options.round) {
+      this.toast.classList.add('round')
+    }
+    if (this.options.theme === 'light') {
+      this.toast.classList.add(`${this.type}`, `light`)
+    } else if (this.options.theme === 'icon') {
+      this.icon.classList.add(`${this.type}-text`)
+    } else if (this.options.theme === 'icon-bg') {
+      this.icon.classList.add(`${this.type}`)
+    } else if (this.options.theme === 'line') {
+      this.toast.classList.add(`line-left`)
+      contents.classList.add(`${this.type}-border`)
+    } else {
+      this.toast.classList.add(`${this.type}`)
+    }
+
+    contents.classList.add('toast-contents')
+    this.toast.appendChild(contents)
+    // this.interval = setTimeout(() => this.hide(), this.options.timeout)
+    return this.toast
+  }
+  // hide() {
+  //   this.toast.classList.remove('swing')
+  //   this.toast.addEventListener('transitionend', () => {
+  //     this.toast.remove()
+  //     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'
+    this.icon.innerHTML = `<i class="fa fa-${iconClass}" />`
+    // this.icon.innerHTML = `<img src="./icons/success.svg" />`
+    // this.toast.appendChild(this.icon)
+    this.toast.appendChild(this.icon)
+  }
+  setContents() {
+    const contents = document.createElement('div')
+    const title = document.createElement('h5')
+    title.classList.add('title', 'ellipsis')
+    const description = document.createElement('div')
+    if (typeof this.msg === 'string') {
+      description.innerHTML = this.msg
+      contents.appendChild(description)
+    } else {
+      if (this.options.useTitle) {
+        title.innerHTML = this.msg.title
+        contents.appendChild(title)
+      }
+      description.innerHTML = this.msg.description
+      contents.appendChild(description)
+    }
+    return contents
+  }
+}
+
+export default Toast

package/src/toast.scss

@@ -0,0 +1,277 @@
+button {border:0 none;background-color:transparent;cursor:pointer}
+
+$success: #528E64;
+$info: #62B0BC;
+$danger: #D53012;
+$attention: #EC6E00;
+$importance: #FDC036;
+
+$lightSuccess: #CBE1D2;
+$lightInfo: #D4E9ED;
+$lightDanger: #FBE0DA;
+$lightAttention: #FFE9D6;
+$lightImportance: #FFF3D7;
+
+$white: #FFFFFF;
+
+$stateColors: (
+    'success': ($success, darken($success, 10), $white, $lightSuccess),
+    'info': ($info, darken($info, 10), $white, $lightInfo),
+    'danger': ($danger, darken($danger, 10), $white, $lightDanger),
+    'attention': ($attention, darken($attention, 10), $white, $lightAttention),
+    'importance': ($importance, darken($importance, 10), $white, $lightImportance),
+);
+
+$colors: (
+  'red': #D93B3B,
+  'sunset': #D44D32,
+  'orange': #D95B2C,
+  'amber': #D3873F,
+  'yellow': #F5B54D,
+  'citron': #CAC747,
+  'lime': #85AB39,
+  'green': #48992F,
+  'mint': #3A874F,
+  'teal': #449698,
+  'cyan': #4D9BCC,
+  'blue': #4E7AF8,
+  'indigo': #5642ED,
+  'purple': #8756F3,
+  'pink': #BF3DA0,
+  'rose': #BB3A62,
+);
+
+@each $color, $value in $stateColors {
+    .toast {
+        &.#{$color}, .#{$color} {
+            background-color: nth($value, 1) !important;
+            color: $white !important;
+            border-color: nth($value, 2) !important;
+            &:hover {
+                background-color: nth($value, 2);
+            }
+            &-text {
+                color: nth($value, 1) !important;
+            }
+            &-bg {
+                background-color: nth($value, 1) !important;
+            }
+            &-border {
+                border-color: nth($value, 2) !important;
+            }
+            &.light {
+                background-color: nth($value, 4) !important;
+                color: nth($value, 1) !important;
+                border-color: nth($value, 2) !important;
+            }
+        }
+    }
+}
+@each $color, $value in $colors {
+  .toast {
+    &.#{$color}, .#{$color} {
+      background-color: $value !important;
+      color: $white !important;
+      border-color: darken($value, 10) !important;
+      &:hover {
+          background-color: darken($value, 10);
+      }
+      &-text {
+          color: $value !important;
+      }
+      &-bg {
+          background-color: $value !important;
+      }
+      &-border {
+          border-color: $value !important;
+      }
+      &.light {
+          background-color: lighten($value, 35) !important;
+          color: $value !important;
+          border-color: darken($value, 10) !important;
+      }
+  }
+  }
+}
+
+
+.toast-board {
+    position: fixed;
+    display: flex;
+    flex-direction: column;
+    z-index: 9999;
+    top: 0;
+    &.on-top {
+      flex-direction: column-reverse;
+    }
+    &.top {
+      &-left {
+        top: 0;
+        left: 0;
+      }
+      &-center {
+        top: 0;
+        left: 50%;
+        transform: translateX(-50%);
+      }
+      &-right {
+        top: 0;
+        right: 0;
+      }
+      &-full-width {
+        top: 0;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 80%;
+        .toast {
+          width: 100%;
+        }
+      }
+    }
+    &.bottom {
+      &-left {
+        bottom: 0;
+        left: 0;
+      }
+  
+      &-center {
+        bottom: 0;
+        left: 50%;
+        transform: translateX(-50%);
+      }
+  
+      &-right {
+        bottom: 0;
+        right: 0;
+      }
+  
+      &-full-width {
+        bottom: 0;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 80%;
+  
+        .toast {
+          width: 100%;
+        }
+      }
+    }
+    .toast {
+      position: relative;
+      display: flex;
+      justify-content: flex-start;
+      width: 400px;
+      margin: 5px;
+      //opacity: .95;
+      color: #333;
+      border-radius: 4px;
+      box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.16);
+      background-color: #fff;
+      //transition: all 500ms;
+      transition-property: opacity, transform;
+      transition-duration: 500ms, 1000ms;
+      line-height: 1em;
+      vertical-align: baseline;
+      // border: 1px solid #d6d6d6;
+      opacity: 0;
+      //transform: translateX(20px);
+      font-size: 1.2em;
+      overflow: hidden;
+      animation: swing-off 500ms ease;
+      &.fade {
+        opacity: .95;
+        transform: translateX(0px);
+      }
+      &.swing {
+        animation: swing 500ms ease;
+        opacity: .95;
+      }
+      &.round {
+        border-radius: 2em;
+      }
+      .toast-contents {
+        flex-grow: 1;
+        padding: 10px;
+        padding-right: 25px;
+        max-width: calc(100% - 50px);
+        font-size: .8em;
+        overflow-wrap: break-word;
+        h5 {
+          font-weight: bold;
+          font-size: 1.2em;
+          margin-bottom: 10px;
+        }
+      }
+      .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-icon {
+        flex-shrink: 1;
+        padding: 10px;
+      }
+      &.line-left {
+        .toast-contents {
+          border-left: 5px solid;
+        }
+      }
+      &.line-top {
+        .toast-contents {
+          border-top: 5px solid;
+        }
+      }
+    }
+    // .ga-primary {
+    //   background-color: $primary;
+    //   color: $white;
+    //   &-text {
+    //     color: $primary;
+    //   }
+    // }
+    // .ga-secondary {
+    //   background-color: $secondary;
+    //   color: $white;
+    // }
+  }
+  @keyframes swing {
+    0% {
+      transform: translateX(300px);
+      opacity: 0;
+    }
+    25% {
+      transform: translateX(20px);
+    }
+    75% {
+      transform: translateX(-10px);
+      opacity: .95;
+    }
+    100% {
+      transform: translateX(0px);
+    }
+  
+  }
+  @keyframes swing-off {
+    0% {
+      transform: translateX(0px);
+    }
+    25% {
+      transform: translateX(-10px);
+      //opacity: 0.95;
+    }
+    75% {
+      transform: translateX(20px);
+    }
+    100% {
+      transform: translateX(300px);
+      //opacity: 0;
+    }
+  
+  }

package/src/toastBoard.js

@@ -0,0 +1,86 @@
+import Toast from './toast'
+
+class ToastBoard {
+  constructor(options) {
+    this.toastId = 0
+    this.options = options
+    this.board = null
+  }
+  show(type, contents, options) {
+    const extendOption = { ...this.options, ...options }
+    if (extendOption.snackbar) {
+      this.clear()
+    }
+    let closeEl = null
+    this.toastId++
+    this.board = this.getBoard(extendOption)
+
+    const toastEl = new Toast(type, contents, extendOption).toast
+    if (extendOption.closeButton) {
+      closeEl = this.setClose()
+      toastEl.appendChild(closeEl)
+    }
+    this.board.appendChild(toastEl)
+    const interval = extendOption.freeze
+      ? null
+      : setTimeout(() => this.hideToast(toastEl, interval), extendOption.timeout)
+    if (extendOption.clickToClose) {
+      toastEl.onclick = () => {
+        this.hideToast(toastEl, interval)
+      }
+    }
+    if (extendOption.closeButton) {
+      closeEl.onClick = () => {
+        this.hideToast(toastEl, interval)
+      }
+    }
+  }
+  getBoard(options) {
+    let board = document.querySelector('.toast-board')
+    if (board) {
+      return board
+    }
+    board = document.createElement('div')
+    board.classList.add('toast-board')
+    board.classList.add(options.position)
+    if (options.displayOnTop) {
+      board.classList.add('on-top')
+    }
+    document.body.appendChild(board)
+    return board
+  }
+  setClose() {
+    const closeButton = document.createElement('button')
+    closeButton.classList.add('toast-close')
+    closeButton.innerHTML = '<span>&times;</span>'
+    return closeButton
+  }
+  hideToast(toast, interval) {
+    this.toastId--
+    toast.classList.remove('swing')
+    toast.addEventListener('transitionend', () => {
+      this.removeToast(toast)
+      clearTimeout(interval)
+    })
+  }
+  removeToast(toast) {
+    toast.remove()
+    if (!this.toastId) {
+      this.clear()
+    }
+  }
+  clearToast() {
+    if (!this.board) return
+    const toasts = this.board.querySelectorAll('.toast')
+    toasts.forEach(t => {
+      this.hideToast(t, null)
+    })
+  }
+  clear() {
+    if (this.board) {
+      this.board.remove()
+    }
+  }
+}
+
+export default ToastBoard