Toast plugin ✅

src/plugins/Toast/ToastComponent.vue

@@ -0,0 +1,191 @@
+<template>
+    <!-- <button @click="show = !show">show/hide</button> -->
+
+  <transition name="slide">
+      <div
+          v-if="show"
+          @click="clicked"
+          class="toast"
+          :class="type">
+
+          <div class="toast--content">
+              <div class=" toast--icon">
+                  <i v-if="image"><img class="toast--icon-image" :src="image" /></i>
+              </div>
+              <div class="toast--text" v-if="description">
+                <span class="toast--text__title">{{title}}</span>
+                <br /><span class="toast--text__description" v-html="description"></span>
+              </div>
+              <div class="toast--text" v-else>
+                <span class="toast--text__title-large">{{title}}</span>
+              </div>
+              <div class="toast--dismiss" @click="dismiss">
+                  <i class="fas fa-times"></i>
+              </div>
+          </div>
+      </div>
+  </transition>
+
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      type: this.$root.type || 'info',
+      title: this.$root.title || undefined,
+      description: this.$root.description || undefined,
+      image: this.$root.image || undefined,
+      link: this.$root.link || undefined,
+      timeout: this.$root.timeout || 2000,
+      show: false
+    }
+  },
+  mounted() {
+    // Here we set show when mounted in-order to get the transition animation to be displayed correctly
+    this.show = true;
+
+    setTimeout(() => {
+      console.log('Your time is up 👋')
+      this.show = false;
+    }, this.timeout);
+  },
+  methods: {
+    clicked() {      
+      if (this.link) {
+        let resolved = this.$root.router.resolve(this.link);
+        
+        if (resolved && resolved.route.name !== '404') {
+          this.$root.router.push(this.link);
+        } else {
+          console.error('Found a link but it resolved to 404. Link:', this.link)
+        }
+      } else {
+        this.show = false;
+      }
+    },
+    dismiss() {
+      this.show = false;
+    },
+    move(e) {
+      console.log('moving', e)
+      let target = e.target;
+
+      console.log('target', target)
+
+      var div = document.getElementById('target');
+      div.style.position = 'absolute';
+      div.style.top = e.clientY + 'px';
+      div.style.left = e.clientX + 'px';
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+// @import '@/scss/variables.scss';
+
+
+.slide-enter-active {
+  transition: all 0.3s ease;
+}
+.slide-enter, .slide-leave-to {
+  transform: translateY(100vh);
+  opacity: 0;
+}
+.slide-leave-active {
+  transition: all 2s ease;
+}
+
+.toast--icon-image {
+  height: 100%;
+  width: 100%;
+  max-height: 45px;
+  max-width: 45px;
+}
+
+.toast {
+  position: fixed;
+  bottom: 0.5rem;
+  cursor: pointer;
+  z-index: 100;
+
+  background-color: white;
+  border-radius: 3px;
+  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.17), 0 2px 4px 0 rgba(0,0,0,0.08);
+  padding: 0.5rem;
+  margin: 1rem 2rem 1rem 0.71rem;
+  // max-width: calc(100% - 3rem);
+  min-width: 320px;
+
+
+  // If small screen we have a min-width that is related to the screen size.
+  // else large screens we want a max-width that only uses the space in bottom right
+
+  right: 0;
+  line-height: 22.5px;
+  
+  &--content {
+    display: flex;
+    align-items: center;
+
+  }
+
+  &--icon {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    text-align: center;
+  }
+
+  &--text {
+    margin-left: 0.5rem;
+    // color: $bt-brown;
+    color: black;
+    word-wrap: break-word;
+
+    &__title {
+      text-transform: capitalize;
+      font-weight: 400;
+
+      &-large {
+        font-size: 2rem;
+      }
+    }
+
+    &__description {
+      font-weight: 300;
+    }
+  }
+
+  &--dismiss {
+    align-self: flex-end;
+
+    img {
+      width: 2.5rem;
+    }
+  }
+
+
+  &.success {
+    border-left: 6px solid #38c172;
+  }
+
+  &.info {
+    border-left: 6px solid #FFD300;
+  }
+
+  &.warning {
+    border-left: 6px solid #f6993f;
+  }
+
+  &.error {
+    border-left: 6px solid #e3342f;
+  }
+
+  &.simple {
+    border-left: unset;
+  }
+
+} 
+</style>

src/plugins/Toast/index.js

@@ -0,0 +1,57 @@
+import Vue from 'vue'
+import ToastComponent from './ToastComponent.vue'
+
+const optionsDefaults = {
+  data: {
+    type: 'info',
+    show: true,
+    timeout: 3000,
+
+    onCreate(created = null) {
+    },
+    onEdit(editted = null) {
+    },
+    onRemove(removed = null) {
+    }
+  }
+}
+
+function toast(options, router) {
+  // merge the default options with the passed options.
+  const root = new Vue({
+    data: {
+      ...optionsDefaults.data,
+      ...options,
+      router
+    },
+    render: createElement => createElement(ToastComponent)
+  })
+
+  root.$mount(document.body.appendChild(document.createElement('div')))
+}
+
+
+export default {
+  install(vue, opts) {
+    console.log('installing toast plugin!')
+    console.log('plugin options', opts)
+
+    Vue.prototype.$notifications = {
+        info(options) {
+          toast({ type: 'info', ...options })
+        },
+        success(options) {
+          toast({ type: 'success', ...options })
+        },
+        warning(options) {
+          toast({ type: 'warning', ...options })
+        },
+        error(options) {
+          toast({ type: 'error', ...options })
+        },
+        simple(options) {
+          toast({ type: 'simple', ...options})
+        }
+    }
+  }
+}